先放一个代码片段: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就不会存在这种问题了,但是那样又太生硬了。
请问这种问题有什么好的解决方法吗?
您好,可以换一个思路,不用scroll-view,直接通过pageScrollTo来滚动。
暂时没什么好的办法,这个是ios的特性
看下这个