swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动

swiper轮播图出现疯狂抖动(小程序) swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动 以前做小程序项目的时候,没专门测试人员,都是开发者自测,可能我的手机性能比较不错(哈哈)或时机不对,总之没发掘到这个bug;近期做项目,测试了不同的手机,发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机,出现的概率尤其的大。由于本次项目是基于uni-app的,直接就用uni-app进行操作说明; 说明:uni-app编写小程... 阅读详情

gitHub代码下载:https://github.com/Syleapn/uni-app-swiper

以前做小程序项目的时候,没专门测试人员,都是开发者自测,可能我的手机性能比较不错(哈哈)或时机不对,总之没发掘到这个bug;近期做项目,测试了不同的手机,发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机,出现的概率尤其的大。由于本次项目是基于uni-app的,直接就用uni-app进行操作说明;


说明:uni-app编写小程序:采用的是微信小程序的API,Vue的语法,所以,他们很相似,只是在写法上有一点稍微的区别,小程序的那套东西也是适用于uni-app的。

在微信小程序的官方文档中,有这样个提示, 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用。
最终产生的后果是如果快速滑动或者息屏一段时间打开后,就出现轮播图的疯狂抖动。

一、解决方法是:
在动画播放结束后(@animationfinish)改变current的值,而不是一滑动(@change)就改变current的值。即用@animationfinish代替 @change。

二、@change与@animationfinish对比说明
1、相同点:都会改变current的值,current代表当前所在滑块的index
2、不同点:改变current的时机不同,@change滑动时立即改变,@animationfinish动画结束后改变!

三、说明:

uniapp中使用swiper轮播以及解决自动,手动切换页面抖动问题 uniapp中使用swiper轮播以及解决自动,手动切换页面抖动问题 <template> <view class="banner-wrap"> <swiper class="banner-swiper" :current="current" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration" 阅读详情

相关推荐

告别抖动!小程序Swiper轮播图性能优化实战

本文深入剖析了小程序Swiper轮播图出现性能抖动的原因,指出在`@change`事件中更新`current`数据会与组件动画产生冲突。核心解决方案是采用`@animationfinish`事件替代,并提出了“变量分离”的高级实践,通过独立控制指示器与Swiper组件的索引,在彻底消除抖动的同时,实现自定义指示器的流畅跟手效果。

weixin_29015801的博客 250

uni-app——uniapp 中使用swiper轮播以及解决自动,手动切换页面抖动问题

uni-app——uniapp 中使用swiper轮播以及解决自动,手动切换页面抖动问题

qq_43201350的博客 1503

VBA中如何使用Edge内核Browser?

在微软宣布停止对IE的支持后,许多使用VBA中Web Browser的用户遇到了困境,因为Web Browser使用的IE内核。然而微软并没有给出支持Edge的新版Web Browser,网上许多第三方的库也不够完善。经过调研,libEdge可以较好的和VBA集成,实现在Excel中打开Browser,甚至能够通过执行js代码,获取web页面的信息。项目需要WebView2Loader.dll和LibEdge.dll两个库,区分x86和x64版本。

金木AI 2399

ArcGIS Pro 3.0 加载天地图WMTS服务,解决偏移问题的保姆级教程(附最新Key申请流程)

本文详细介绍了在ArcGIS Pro 3.0中精准加载天地图WMTS服务的全流程,包括最新Key申请流程、解决地图偏移问题的关键配置步骤以及常见问题排查方法。通过设置`esri`参数和统一坐标参考,确保地理数据与天地图底图精确匹配,提升GIS空间分析的准确性。

weixin_28713947的博客 309

从零开始学习信号完整性(SIPI)--2

上一节我们已经谈过,信号完整性研究的是如何使驱动器输出的信号传输到接收器件并被正确的接收。 信号完整性的三要素包含了:信号、驱动接收芯片、传输通道。 这其中信号是主体,我们要做的主要工作就是设计好信号的传输路径为信号的正确传输扫清障碍。要做信号完整性分析与设计首先要了解信号的特性,以及信号质量的判别标准。 对一个信号进行描述通常需要如下几个指标: 信号特性的描述 摆幅:信号从低电平到高电平之间的电压差,对于单端信号通常由信号的供电电压决......

qq_29476769的博客 2万+

rk3588 rkaiq_3A_server 无法解析json文件记录

rk3588 rkaiq_3A_server 无法解析json文件记录

neardi_dev的博客 1万+

Unity坦克物理系统:履带驱动与力场建模实战指南

在游戏物理仿真中,履带车辆的运动建模远超传统轮式控制器的范畴。其核心在于摒弃WheelCollider的滚动幻觉,转向基于牛顿力学的力与力矩协同求解——通过主推进力场、转向力矩场和地面反作用力场三重叠加,实现对质量、摩擦、惯性及坡度阻力的真实响应。这种建模方式不仅支撑坦克爬坡、陷泥、侧倾等复杂行为,更保障了多人同步与高帧率下的物理稳定性。Physics Tank Maker 正是这一思路的工业级落地,它将PhysX底层机制与坦克动力学深度耦合,提供可调参数、事件驱动视觉反馈及标准扩展接口,成为面向严肃模拟类

weixin_29535577的博客 562

Linux系统故障排查思路实践教程(上)

本文主要介绍了Linux系统日志分析与常见故障排查的实用方法。首先从系统日志的分类及其涉及的日志文件进行说明;其次详细讲解了忘记用户密码的解决方案;接着对系统无法启动问题,提供了异常断电后修复文件系统、/etc/fstab文件丢失恢复等常见故障的处理方案。最后介绍了文件系统只读错误的排查思路和修复方法,包括磁盘空间检查、文件系统修复等实用技巧。全文提供了大量具体命令和操作流程,为Linux系统维护人员提供了实用的故障处理指南。

提供C#相关开发 、云计算、运维测试、网络安全相关技术分享与服务,有意向可联系。 330

智能测试策略优化:平衡覆盖率、时间和资源

在软件开发过程中,测试是确保软件质量的关键环节。然而,测试工作往往面临着诸多挑战,其中如何在保证测试覆盖率的前提下,合理分配时间和资源是一个核心问题。本文章的目的在于探讨智能测试策略的优化方法,帮助软件测试团队在有限的时间和资源条件下,实现尽可能高的测试覆盖率。文章的范围涵盖了智能测试策略的核心概念、算法原理、数学模型、实际应用案例以及相关工具和资源等方面。本文将按照以下结构进行组织:首先介绍智能测试策略优化的背景和相关概念,包括核心术语和缩略词的定义;

AIGC应用创新大全的博客 620

数控系统(CNC)系列:Hurco VMX42SR_(3).控制系统硬件组成部分

控制箱是CNC系统的核心部分,负责处理所有的控制指令和数据。它通常包含主控板、电源模块、接口板等关键组件。伺服驱动器是CNC系统中的关键组件,负责将主控板发出的控制信号转换为电机所需的驱动电流。它通过闭环控制确保电机的精确运动。电机是CNC系统中的执行机构,负责实现主控板发出的运动指令。常见的电机类型包括步进电机和伺服电机。传感器是CNC系统中的重要组件,用于检测和反馈机床的运行状态。常见的传感器类型包括位置传感器、速度传感器、温度传感器等。电源供应系统为CNC系统的所有组件提供电力。主电源。

2401_87715305的博客 1281

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

上一篇: 小程序自定义组件与uni-app组件间传值异同总结
下一篇: wx.request请求封装(微信小程序/uni-app)
Syleapn
博客等级 码龄9年 60粉丝 32原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值