收藏
回答

scroll-view惯性滚动时动态设置scrollTop时的回弹抖动问题?

先放一个代码片段:https://developers.weixin.qq.com/s/VmrfhvmU7hcv

实现效果:如下图——向下划动时直接滚动到底部,向上划动时直接滚动到顶部。

我在通过 touchstart 和 touchend 事件来判断上划或下划,在 touchend 时触发,上划就设置 scroll-top 为最大值,下划则设置为0。

onTouchstart(e) {
  this.startPageY = e.changedTouches[0].pageY;
},
onTouchend(e) {
  // 划动距离
  const moveY = e.changedTouches[0].pageY - this.startPageY;
  if (moveY !== 0) {
    // 上划就滚动到底部,下划就滚动到顶部
    this.setData({ scrollTop: moveY > 0 ? 0 : 10000})
  }
}

但是划动速度过快时,页面会出现回弹抖动,如下图。为了方便观察,我把页面背景设成了黑色。


猜测是由于 scroll-view 的惯性滚动引起的,在触发 touchend 时,滚动并没有结束。如果把 scroll-with-animation (在设置滚动条位置时使用动画过渡)设为flase就不会存在这种问题了,但是那样又太生硬了。

请问这种问题有什么好的解决方法吗?

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

2 个回答

  • Don't rush it
    Don't rush it
    2021-02-03

    您好,可以换一个思路,不用scroll-view,直接通过pageScrollTo来滚动。

    2021-02-03
    有用
    回复
  • var 友原
    var 友原
    2019-10-30

    暂时没什么好的办法,这个是ios的特性

    2019-10-30
    有用
    回复 5
    • chouchou
      chouchou
      2019-10-30
      不是ios的问题,安卓上也是这样
      2019-10-30
      回复
    • var 友原
      var 友原
      2019-10-30回复chouchou
      https://developers.weixin.qq.com/community/develop/doc/00084690310100841c68ac9505bc14
      看下这个
      2019-10-30
      回复
    • "
      2019-10-30回复var 友原
      官方不开发了 都没在需求列表里
      2019-10-30
      回复
    • chouchou
      chouchou
      2019-10-30回复var 友原
      我觉得这里的回弹可能是由于设置scroll-top时scroll-view还在惯性滚动造成的,而不是scroll-view本身的回弹效果。因为我如果划动的距离足够长,直接划到顶部/底部的话,是没有回弹的。
      2019-10-30
      回复
    • chouchou
      chouchou
      2019-10-30
      如果scroll-view能提供一个滚动结束的api,或者可以取消惯性滚动的属性,应该就可以解决这个问题了。
      2019-10-30
      回复
登录 后发表内容
问题标签