小程序
小游戏
企业微信
微信支付
扫描小程序码分享
通过bindscroll事件获取scrollTop和scrollLeft值,动态改变scroll-view标签的scroll-top和scroll-left的值,实现两个scroll-view联动,频繁的抖动?是setData赋值过多?binddragend也不好用。小程序版本2.20.2
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
scroll和setData不是合适的一对,尽量别一起出现
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
大佬解决了吗
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; } },
大佬,两个scroll-view联动问题解决了吗?我遇到相同的问题了。
左边点击菜单栏,右边商品滚动到顶部;右边栏滚动时左边对应菜单栏要高亮也滚动到顶部。然后他们两个一直互相监听滚动,笑死(*^_^*)
这种涉及到手势的需要大量setData的组件,一律改用wxs实现
做个函数防抖啊,别那么频繁的setData
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
scroll和setData不是合适的一对,尽量别一起出现
大佬解决了吗
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; } },
大佬,两个scroll-view联动问题解决了吗?我遇到相同的问题了。
左边点击菜单栏,右边商品滚动到顶部;右边栏滚动时左边对应菜单栏要高亮也滚动到顶部。然后他们两个一直互相监听滚动,笑死(*^_^*)
这种涉及到手势的需要大量setData的组件,一律改用wxs实现
做个函数防抖啊,别那么频繁的setData