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

scroll-view实现与其他scroll-view模块联动后频繁抖动怎么解决？

通过bindscroll事件获取scrollTop和scrollLeft值，动态改变scroll-view标签的scroll-top和scroll-left的值，实现两个scroll-view联动，频繁的抖动？是setData赋值过多？binddragend也不好用。小程序版本2.20.2

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

5 个回答

  • 神经蛙
    神经蛙
    2021-10-20

    scroll和setData不是合适的一对，尽量别一起出现

    2021-10-20
    有用 2
    回复 1
    • 滕云
      滕云
      发表于移动端
      2021-10-20
      小程序的赋值避免不了setData！这可不怎么是好
      2021-10-20
      赞
      回复
  • A梦
    A梦
    2023-06-30

    大佬解决了吗

    2023-06-30
    有用 1
    回复
  • musicatravelove
    musicatravelove
    2023-01-08

    scroll-view滑动的时候会有一个回弹效果，所以会使比如scrollLeft的值小于0，同时右滑也会大于极值，所以可以增加判断，scrollLeft >= 0 && scrollLeft <=maxLeft 的情况，才需要设置setData，否则不需要处理。

    同时可以加上节流、防抖之类的，但是会有延迟，不过亲测不会抖动了

    <scroll-view
        :scroll-x="true"
        @scroll="handlerScroll"
        :bounces="false"
        :scroll-anchoring="true"
        :scroll-left="scrollLeft"
      >
</scroll-view>

this.handlerScroll = throttle(this.realHandlerScroll);

realHandlerScroll(e) {
      const scrollLeft = e?.detail?.scrollLeft || 0;
      const maxLeft = (this.demoArr?.length - 3) * 92;

      if (scrollLeft >= 0 && scrollLeft <= maxLeft) {
        this.scrollLeft = e?.detail?.scrollLeft || 0;
      }
    },



    2023-01-08
    有用
    回复
  • 风禾
    风禾
    2021-10-20

    这种涉及到手势的需要大量setData的组件，一律改用wxs实现

    2021-10-20
    有用
    回复 3
    • 滕云
      滕云
      发表于移动端
      2021-10-20
      不会用wxss实现😖
      2021-10-20
      赞
      回复
    • 风禾
      风禾
      2021-10-20回复滕云
      wxs是微信自己实现的脚本语言，算是微型版js，相当于浏览器端直接操作dom，https://www.cnblogs.com/haha1212/p/11562944.html，研究一下这个组件就全都会了
      2021-10-20
      赞
      回复
    • 滕云
      滕云
      2021-10-21回复风禾
      我研究一下，感谢
      2021-10-21
      赞
      回复
  • 郑钱花
    郑钱花
    2021-10-20

    做个函数防抖啊，别那么频繁的setData

    2021-10-20
    有用
    回复 1
    • 滕云
      滕云
      2021-10-20
      多个scroll-view需要同时动，判断移动距离减少setData触发还是抖动，太大的距离会影响页面效果
      2021-10-20
      赞
      回复
请 登录 后发表内容
相关问题
相关文档