当前位置: 首页 > 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()}
    }


 

相关文章:

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

今天在实现微信小程序的一个横向导航的时候出现了一个问题&#xff0c;就是每次滑到滚动条最右边的时候 scrollLeft的值都不准确 原因&#xff1a;因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流&#xff0c;可以在scroll-view 加一个 throttle“{{false}}” 关闭…...

symfony/console

github地址&#xff1a;GitHub - symfony/console: Eases the creation of beautiful and testable command line interfaces 文档地址&#xff1a;The Console Component (Symfony 5.4 Docs) 默认命令list&#xff0c;可以用register注册一个command命令&#xff0c;之后可以…...

OSI模型简介及socket,tcp,http三者之间的区别和原理

1.OSI模型简介&#xff08;七层网络模型&#xff09; OSI 模型(Open System Interconnection model)&#xff1a;一个由国际标准化组织提出的概念模型&#xff0c;试图提供一个使各种不同的计算机和网络在世界范围内实现互联的标准框架。 它将计算机网络体系结构划分为七层,每…...

【leetcode】leetcode69 x的平方根

文章目录 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。原理牛顿法&#xff08;数值分析中使用到的&#xff09;:二分法 解决方案java 实现实例执行结果 python 实现实例 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&…...

springboot与rabbitmq的整合【演示5种基本交换机】

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;后端专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…...

【设计模式】设计原则-单一职责原则

单一职责原则 类的设计原则之单一职责原则&#xff0c;是最常用的类的设计的原则之一。 百度百科&#xff1a;就一个类而言&#xff0c;应该仅有一个引起它变化的原因。应该只有一个职责。 通俗的讲就是&#xff1a;一个类只做一件事 这个解释更通俗易懂&#xff0c;也更符…...

【C++】-多态的底层原理

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …...

【部署】让你的电脑多出一个磁盘来用!使用SSHFS将远程服务器目录挂载到Windows本地,挂载并共享服务器资源

让你的电脑多出一个磁盘来用&#xff01;---使用SSHFS将远程服务器目录挂载到Windows本地 1. 方法原理介绍2.SSHFS-Win使用教程—实现远程服务器磁盘挂载本地 由于日常主要用 Windows 系统&#xff0c;每次都得 ssh 到服务器上进行取资源&#xff08;本地磁盘不富裕&#xff09…...

/var/lock/subsys目录的作用

总的来说&#xff0c;系统关闭的过程&#xff08;发出关闭信号&#xff0c;调用服务自身的进程&#xff09;中会检查/var/lock/subsys下的文件&#xff0c;逐一关闭每个服务&#xff0c;如果某一运行的服务在/var/lock/subsys下没有相应的选项。在系统关闭的时候&#xff0c;会…...

DETR (DEtection TRansformer)基于自建数据集开发构建目标检测模型超详细教程

目标检测系列的算法模型可以说是五花八门&#xff0c;不同的系列有不同的理论依据&#xff0c;DETR的亮点在于它是完全端到端的第一个目标检测模型&#xff0c;DETR&#xff08;Detection Transformer&#xff09;是一种基于Transformer的目标检测模型&#xff0c;由Facebook A…...

C++初阶 - 5.C/C++内存管理

目录 1.C/C的内存分布 2.C语言中动态内存管理方式&#xff1a;malloc、calloc、realloc、free 3.C内存管理方式 3.1 new/delete操作内置类型 3.2 new 和 delete操作自定义类型 4.operator new 与 operator delete 函数&#xff08;重要点&#xff09; 4.1 operator new 与…...

数学建模学习(3):综合评价类问题整体解析及分析步骤

一、评价类算法的简介 对物体进行评价&#xff0c;用具体的分值评价它们的优劣 选这两人其中之一当男朋友&#xff0c;你会选谁&#xff1f; 不同维度的权重会产生不同的结果 所以找到每个维度的权重是最核心的问题 0.25 二、评价前的数据处理 供应商ID 可靠性 指标2 指…...

【后端面经】微服务构架 (1-5) | 限流:濒临奔溃?限流守护者拯救系统于水火之中!

文章目录 一、前置知识1、什么是限流?2、限流算法A) 静态算法a) 漏桶b) 令牌桶c) 固定窗口d) 滑动窗口B) 动态算法3、限流的模式4、 限流对象4、限流后应该怎么做?二、面试环节1、面试准备2、基本思路3、亮点展现A) 突发流量(针对请求个数而言)B) 请求大小(针对请求大小而言)…...

HDFS异构存储详解

异构存储 HDFS异构存储类型什么是异构存储异构存储类型如何让HDFS知道集群中的数据存储目录是那种类型存储介质 块存储选择策略选择策略说明选择策略的命令 案例&#xff1a;冷热温数据异构存储对应步骤 HDFS内存存储策略支持-- LAZY PERSIST介绍执行使用 HDFS异构存储类型 冷…...

《面试1v1》Kafka消息是采用Pull还是Push模式

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…...

Windows环境Docker安装

目录 安装Docker Desktop的步骤 Docker Desktop 更新WSL WSL 的手动安装步骤 Windows PowerShell 拉取&#xff08;Pull&#xff09;镜像 查看已下载的镜像 输出"Hello Docker!" Docker Desktop是Docker官方提供的用于Windows的图形化桌面应用程序&#xff0c…...

Spring 6.0官方文档示例(23): singleton类型的bean和prototype类型的bean协同工作的方法(二)

使用lookup-method: 一、实体类&#xff1a; package cn.edu.tju.domain2;import java.time.LocalDateTime; import java.util.Map;public class Command {private Map<String, Object> state;public Map<String, Object> getState() {return state;}public void …...

Docker Compose 容器编排

Docker compose Docker compose 实现单机容器集群编排管理&#xff08;使用一个模板文件定义多个应用容器的启动参数和依赖关系&#xff0c;并使用docker compose来根据这个模板文件的配置来启动容器&#xff09; 通俗来说就是把之前的多条docker run启动容器命令 转换为docker…...

while循环

while循环是一种常见的循环结构&#xff0c;它会重复执行一段代码&#xff0c;直到指定的条件不再满足。 基本语法如下&#xff1a; while 条件: # 循环体代码 其中&#xff0c;条件是一个布尔表达式&#xff0c;如果为True&#xff0c;则执行循环体中的代码&#xff1b;如果…...

从JVM指令看String对象的比较

在翻看各类 java 知识中&#xff0c;总会提到如下知识&#xff1a;比较 String 对象&#xff0c;例如&#xff1a; String a1new String("10"); String a2"10"; String a3"1""0";//结果 System.out.println(a1a2); //false System.ou…...

Kubernetes实战:构建高可用Zookeeper集群(3节点)的完整指南

1. 为什么要在Kubernetes上部署Zookeeper集群&#xff1f; Zookeeper作为分布式系统的"大脑"&#xff0c;在微服务架构中扮演着关键角色。它负责维护配置信息、命名服务、分布式同步和集群管理等核心功能。传统物理机部署Zookeeper集群时&#xff0c;我们需要手动配置…...

AI辅助开发新体验:让快马平台智能生成风车动漫用户中心模块

最近在开发一个动漫类网站项目时&#xff0c;遇到了用户中心模块的开发需求。作为一个独立开发者&#xff0c;既要处理前端界面又要兼顾后端接口&#xff0c;工作量确实不小。好在发现了InsCode(快马)平台的AI辅助开发功能&#xff0c;帮我高效完成了这个模块的开发。下面分享下…...

QGIS属性表双向操作指南:导出Excel做分析,再导回地图做可视化(避坑数据丢失)

QGIS属性表双向操作指南&#xff1a;导出Excel做分析&#xff0c;再导回地图做可视化&#xff08;避坑数据丢失&#xff09; 在空间数据分析领域&#xff0c;QGIS作为开源GIS软件的标杆&#xff0c;其属性表与Excel的双向交互能力常被低估。许多用户习惯将空间数据的属性导出至…...

零代码玩转华为云DeepSeek:用Witsy打造专属AI客服的完整避坑指南

零代码玩转华为云DeepSeek&#xff1a;用Witsy打造专属AI客服的完整避坑指南 当电商客服每天需要处理上千条重复咨询&#xff0c;当教育机构的课程顾问被基础问题占满工作时间&#xff0c;传统人工服务模式正面临前所未有的效率瓶颈。据行业调研数据显示&#xff0c;接入智能客…...

RTKLIB数据处理避坑大全:从SPP/PPP精度对比到LAPACK库调用疑难解析

RTKLIB数据处理避坑大全&#xff1a;从SPP/PPP精度对比到LAPACK库调用疑难解析 当你在处理GNSS数据时&#xff0c;是否遇到过这样的困扰&#xff1a;明明按照教程一步步操作&#xff0c;结果却出现大量"飞点"&#xff0c;精度远不如预期&#xff1f;或者当你想要启用…...

打造你的专属数字伙伴:BongoCat虚拟桌宠完全指南 [特殊字符]

打造你的专属数字伙伴&#xff1a;BongoCat虚拟桌宠完全指南 &#x1f431; 【免费下载链接】BongoCat &#x1f431; 跨平台互动桌宠 BongoCat&#xff0c;为桌面增添乐趣&#xff01; 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 你是否曾幻想过在单调的…...

RAGENativeUI:面向GTA模组开发的原生级界面框架架构分析

RAGENativeUI&#xff1a;面向GTA模组开发的原生级界面框架架构分析 【免费下载链接】RAGENativeUI 项目地址: https://gitcode.com/gh_mirrors/ra/RAGENativeUI 技术痛点深度剖析&#xff1a;GTA模组界面开发的现实挑战 在Grand Theft Auto V模组开发领域&#xff0c…...

oh-my-posh2 配置备份与恢复终极指南:确保你的个性化设置永不丢失

oh-my-posh2 配置备份与恢复终极指南&#xff1a;确保你的个性化设置永不丢失 【免费下载链接】oh-my-posh2 A prompt theming engine for Powershell 项目地址: https://gitcode.com/gh_mirrors/oh/oh-my-posh2 oh-my-posh2 是一款强大的 PowerShell 提示主题引擎&…...

如何快速实现React组件热更新:React Hot Loader终极指南 [特殊字符]

如何快速实现React组件热更新&#xff1a;React Hot Loader终极指南 &#x1f680; 【免费下载链接】react-hot-loader Tweak React components in real time. (Deprecated: use Fast Refresh instead.) 项目地址: https://gitcode.com/gh_mirrors/re/react-hot-loader …...

如何永久保存微信聊天记录:WeChatMsg终极指南与数据守护方案

如何永久保存微信聊天记录&#xff1a;WeChatMsg终极指南与数据守护方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we…...