当前位置: 首页 > news >正文

uniapp微信小程序scroll-view滚动scrollLeft不准确

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

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()}
    }


 

http://www.lryc.cn/news/96364.html

相关文章:

  • symfony/console
  • OSI模型简介及socket,tcp,http三者之间的区别和原理
  • 【leetcode】leetcode69 x的平方根
  • springboot与rabbitmq的整合【演示5种基本交换机】
  • 【设计模式】设计原则-单一职责原则
  • 【C++】-多态的底层原理
  • 【部署】让你的电脑多出一个磁盘来用!使用SSHFS将远程服务器目录挂载到Windows本地,挂载并共享服务器资源
  • /var/lock/subsys目录的作用
  • DETR (DEtection TRansformer)基于自建数据集开发构建目标检测模型超详细教程
  • C++初阶 - 5.C/C++内存管理
  • 数学建模学习(3):综合评价类问题整体解析及分析步骤
  • 【后端面经】微服务构架 (1-5) | 限流:濒临奔溃?限流守护者拯救系统于水火之中!
  • HDFS异构存储详解
  • 《面试1v1》Kafka消息是采用Pull还是Push模式
  • Windows环境Docker安装
  • Spring 6.0官方文档示例(23): singleton类型的bean和prototype类型的bean协同工作的方法(二)
  • Docker Compose 容器编排
  • while循环
  • 从JVM指令看String对象的比较
  • python与深度学习(六):CNN和手写数字识别二
  • Linux使用教程
  • 项目名称:智能家居边缘网关项目
  • SciencePub学术 | 物联网类重点SCIEEI征稿中
  • EtherNet/IP转Modbus网关以连接AB PLC
  • mysql用户添加
  • 628. 三个数的最大乘积
  • linux驱动开发入门(学习记录)
  • SpringCloud-Alibaba之Sentinel熔断与限流
  • 深“扒”云原生高性能分布式文件系统JuiceFS
  • opencv-18 什么是色彩空间?