公告列表
公告列表
收藏
回答

scroll-view抖动问题

框架类型 问题类型 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。腾讯大神遇不到

回答关注问题邀请回答
收藏

9 个回答

  • 1994
    1994
    2018-10-22

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

    2018-10-22
    有用 3
    回复 1
    • Ylimhs
      Ylimhs
      2019-06-26

      管用，管用

      2019-06-26
      赞
      回复
  • 摘星星
    摘星星
    2020-04-16

    加延时减少触发频率


    2020-04-16
    有用 2
    回复 1
    • 百炼钢
      百炼钢
      2021-04-11
      这个有用，我就是使用的这个延时设置 scroll-top，用的uniapp，原理是一样的。唯一不同的就是： 先让 `let scrollTop` 保存了 `evt.detail.scrollTop` 的值 ……
      2021-04-11
      赞
      回复
  • 羊
    羊
    10-01

    如果scroll-view是固定在屏幕顶部的，

    把 position：sticky 改成 position fixed，闪动就消失了。

    10-01
    有用
    回复
  • 小fafa
    小fafa
    2019-06-26

    请问解决了吗 楼主

    2019-06-26
    有用
    回复 2
    • JH
      JH
      2019-09-27
      把scroll -top 去掉就可以了，一楼说过了
      2019-09-27
      赞
      回复
    • ㅤㅤㅤㅤㅤ
      ㅤㅤㅤㅤㅤ
      2022-03-01
      不行啊   去掉就不能返回顶部啊
      2022-03-01
      赞
      回复
  • 哎呦妈呀
    哎呦妈呀
    2018-12-03

    楼主问题解决没

    2018-12-03
    有用
    回复
  • 灵芝
    灵芝
    2018-08-10

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

    2018-08-10
    有用
    回复 2
    • 2019-05-30

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


      2019-05-30
      赞
      回复
    • 主演
      主演
      2022-07-15回复
      请问问题解决了嘛，我也遇到这个问题
      2022-07-15
      赞
      回复
  • 彭晓明
    彭晓明
    2018-08-10

    好。我试试这个情况

    2018-08-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

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

    2018-08-10
    有用
    回复 15
    查看更多(10)
请 登录 后发表内容
相关问题
相关文档