收藏
回答

scroll-view抖动问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 微信iOS客户端 6.7.0 2.2.1

wxml:

<scroll-view class='page-menu-body' style='height:{{menuHeight}}rpx;' scroll-y="true" scroll-top="{{menuScrolltop}}" bindscroll="menuScrollHandle" bindscrolltolower="menuScrollLoading" bindscrolltoupper="menuScrollToupper">


wxss :

.page-menu-body {

display: flex;

/* height: 100%; */

width: 636rpx;

z-index: 100;

}



menuHeight 是屏幕高。


下拉弹性页面的时候,跳动。而且,很多 用到scroll-view的地方都这样。  ios 下,Android 下会闪动。我发现论坛很多这个问题。没有解决方案?还是我们比较菜一下。经常遇到bug。腾讯大神遇不到

最后一次编辑于  2018-08-10  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

7 个回答

  • 1994
    1994
    2018-10-22

    把scroll -top 去掉就可以了 你可以试试

    2018-10-22
    赞同 2
    回复 1
    • 北悸&
      北悸&
      06-26

      管用,管用

      06-26
      回复
  • 卢霄霄
    卢霄霄
    2018-08-10

    是不是 menuScrollToupper 里刷新了里面的内容

    2018-08-10
    赞同
    回复 15
    查看更多(10)
  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-08-10

    原因好像是内容改变的时候bindscrolltoupper多次触发,

    可以限制下bindscrolltoupper的调用频率,让它避免多次触发

    function debounce(func, wait = 500) {
      var timeout;
      var result;
      return function() {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(function() {
          result = func.apply(context, args)
        }, wait);
        return result;
      };
    }
    onScrollUpper: debounce(function handleUpper (){},500)


    2018-08-10
    赞同
    回复 4
    • 彭晓明
      彭晓明
      2018-08-10

      我试一下这个做法

      2018-08-10
      回复
    • 彭晓明
      彭晓明
      2018-08-10

      还有个是,ios下,scroll到顶了,再下拉。会有弹力效果。在这个效果展示的期间,scroll-view 的deltaY值,有时候会变为0.就是一帧的事情。所以就会看到闪动。这个跟toupper没关系的吧?

      2018-08-10
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-08-13回复彭晓明

      上次在做局部下拉的时候,一个问题是uoupper闪动,另一个是下拉跟整个页面的滚动有冲突,解决方法:去掉局部下拉功能,改为整个页面的pagescroll,这个稳定一些

      2018-08-13
      回复
    • 彭晓明
      彭晓明
      2018-08-14回复🚗🚕🚙🚌🚎🚒🚐🚚

      找到原因了。是

      bindscroll 绑定的参数,

      e.detail.scrollTop 这个值。有时候会变成1. 导致我后续逻辑问题


      2018-08-14
      回复
  • 彭晓明
    彭晓明
    2018-08-10

    好。我试试这个情况

    2018-08-10
    赞同
    回复
  • nickname
    nickname
    2018-08-10

    你好,请提供出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-08-10
    赞同
    回复 1
    • lcl123456
      lcl123456
      05-30

      在 ios 下,快速滚动同时触发加载更多就会出现整个页面抖动,猜测原因是滚动和渲染两个耗性能的操作同时进行导致页面抖动,可以通过给 lower-threshold 设置一个较大的值来缓解抖动(提前加载,错开滚动和渲染,测试 lower-threshold 设为 300 时滚动到底已经比较正常),但是没有办法根本解决


      05-30
      回复
  • 哎呦妈呀
    哎呦妈呀
    2018-12-03

    楼主问题解决没

    2018-12-03
    赞同
    回复
  • 小fafa
    小fafa
    06-26

    请问解决了吗 楼主

    06-26
    赞同
    回复