今天在实现微信小程序的一个横向导航的时候出现了一个问题,就是每次滑到滚动条最右边的时候

scrollLeft的值都不准确

原因:因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流,可以在scroll-view 加一个 throttle=“{{false}}”
关闭节流,如下:
<scroll-view :throttle='false' bindscroll="onScroll"> <!-- ... -->
</scroll-view>
但是这种方法会影响性能,这是因为关闭节流后,onScroll
事件会在每次滚动时触发,可以提高滚动位置监测的精确度。但需要注意的是,这会增加一定的性能消耗,如果滚动区域很大,滚动频繁,会带来较大的计算压力。所以在复杂场景下,我们还是建议保留系统的节流行为

如果不想消耗过多性能,又想实现精确的滚动监听,怎么办? 

1. 使用节流或防抖来限制onScroll事件的触发频率
// 节流,100ms内只触发一次 onScroll: _.throttle(function(e) { //... }, 100) //
防抖,滚动结束500ms后触发 onScroll: _.debounce(function(e) { //... }, 500)

2. 只在特定情况主动获取滚动值:

* 滚动开始时获取一次
* 滚动结束时获取一次
* 滚动到边界时获取一次通过wx.createSelectorQuery()主动获取滚动值,只在需要精确值时触发 onScrollStart() {
this.getScrollTop() } onScrollEnd() { this.getScrollTop() } onScroll() {
if(达到边界) { this.getScrollTop() } }

 

技术
今日推荐
PPT
阅读数 89
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信