微信小程序新坑 swiper监听被使用setData后会不停触发swiper的滑动事件

最新推荐文章于 2024-07-09 14:04:52 发布
最新推荐文章于 2024-07-09 14:04:52 发布
阅读量4.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38603437/article/details/92009924
版权
本文分析了微信小程序中swiper组件在遇到setData更新数据后，无限触发滑动事件的问题。原因是小程序未正确记录touchend状态，导致swiper重新渲染时触发切换事件。解决方法是在swiper外层设置触摸监听并限制逻辑执行，防止setData无限循环。
摘要由CSDN通过智能技术生成

swiper对象在真机产生滑动事件一次滑动就无限地被触发的原因分析

swiper切换的滑动原理

swiper对象本身是通过h5触摸事件触发的swiper对象内部所封装的滑动事件处理函数，通过这个切换处理函数实现的swiper对象的子对象swiper-item所生成的模块的滑动切换效果

swiper切换的真机滑动产生异常的罪魁祸首

原生swiper对象会对内部的滑动动画函数的调用进行执行之前的条件限制

简而言之就是指swiper对象对swiper对象的H5触摸事件:touchstart、touchmove、touchend做了状态记录，

每次执行之前都会通过状态属性判断，只有touchstart、touchmove事件对应的状态属性已触发并且touchend对应的状态属性未触发时才

最低0.47元/天 解锁文章
前端_小柒
关注
小程序原生swiper中bindtransition监听滑动效果
qq_28840533的博客
12-10 2274
wxml <view> <swiper next-margin="50rpx" previous-margin="54rpx" current="{{swiCurrent}}" bindchange="swiperChange" data-current="{{swiCurrent}}" interval="100" bindanimationfinish="bindanimationfinish" bindtransition="bindtransition" class..
微信小程序之Swiper组件
热门推荐
xiangzhihong8的专栏
06-10 2万+
Swiper Swiper是一个滑块容器类组件，主要提供如下的一些属性。 属性名 类型 说明 支持版本 indicator-dots Boolean 是否显示面板指示点...
【HarmonyOS NEXT】如何关闭Swiper组件的回弹效果
最新发布
Mayism123的博客
07-09 508
Swiper组件在划动到第一张或最后一张时再继续划动会有一个回弹的效果，能否实现划动到边缘时图片固定住的效果。Swiper / 关闭回弹 / 固定。
微信小程序——swiper组件在左右不断自己切换滑动
Honker Caleb的专栏
06-02 1180
问题：微信小程序的swiper组件在左右不断切换滑动会发生疯狂的滑动 可能原因：这是因为动态设置了current的问题，当source为空字符串的时候，此时触摸滑动就会导致这样一直滑动 解决方法：在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起 if (e.detail.source === 'touch') { this.setData({ current: e.detail.current }) } ...
微信小程序swiper组件设置滚动监听(bindchange)导致swiper item闪烁、跳动、卡住BUG。
weixin_40336827的博客
04-23 6774
最近在使用swiper的时候，下拉刷新后导致swiper item不断的跳动卡住。 一开始以为是下拉刷新导致的，后面在开发社区看到相关的问题，是由于swiper导致的。 在手动滑动swiper时打出以下消息： 而自动轮播的detail->source 是autoplay 在拖动的时候和自动轮播产生了冲突，导致setData方法不断被调用。所以swiper i...
关于swiper滑动触发事件
IT_iosers的博客
10-11 8961
onSlideChangeStart(swiper) swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数 onSlideChangeEnd(swiper) swiper从一个slide过渡到另一个slide结束时执行。 用法：通过滑动控制标签页的高亮 <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{
微信小程序使用swiper组件实现层叠轮播图
10-17
为了丰富小程序的内容展示，Swiper组件作为实现轮播图的重要工具被广泛使用。本文主要介绍如何在微信小程序中使用swiper组件来实现层叠轮播图效果，这可以有效吸引用户的注意力，并提升用户体验。 首先，我们需要...
微信小程序swiper实现滑动放大缩小效果
10-17
在微信小程序中实现滑动放大缩小效果主要依赖于swiper组件，这是微信小程序中一个用于轮播展示图片或者其他内容的组件。通过合理配置swiper组件的属性和绑定事件，可以实现用户在滑动时图片放大缩小的交互效果。 ...
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
01-20
在微信小程序中，Swiper组件通常用于实现卡片式的切换效果，而内嵌的Scroll-View则可以实现内容的滚动。然而，默认情况下，Scroll-View在滚动时会显示滚动条，这可能会影响页面的整体美观。本实例主要讲解如何在微信...
微信小程序之swiper滑动面板用法示例
01-03
本文实例讲述了微信小程序之swiper滑动面板用法。分享给大家供大家参考，具体如下： swiper就是为了以后做轮播图用的。下面是一些它的属性 PS：关于微信小程序组件可参考本站在线工具微信小程序组件说明表...
微信小程序swiper的左右不断切换滑动bug解决
qq_41082746的博客
06-24 995
if (e.detail.source === 'touch') { this.setData({ current: e.detail.current }) }
微信小程序swiper组件真机上滑动过快导致崩溃问题
Mertyu的博客
12-04 1253
使用微信小程序的swiper组件时，如果在bindchange的事件回调函数中使用setData改变current值，则有可能导致setData被不停地调用，因而通常情况下请在改变current值前检测source字段来判断是否是由于用户触摸引起。 autoplay自动播放导致swiper变化； touch用户划动引起swiper变化； 其它原因将用空字符串表示。...
swiper怎么让不会回弹_小程序取消橡皮筋回弹效果解决方案及坑总结（持续更新）...
weixin_34298263的博客
12-24 3459
提到ios系统的橡皮筋效果，作为开发者是又爱又恨，有想要这个效果又有不想要的，无奈的是却没有一个简单的开关来设置这个效果是否开启。最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题，这里分两部分(取消橡皮筋回弹效果和因为这个效果遇到的坑)和大家分享一下。取消IOS橡皮筋回弹效果的解决方案1) 页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从...
微信小程序滑动切换之swiper
weixin_45653441的博客
05-29 1782
小程序项目中遇到几个需要滑动切换效果，上来用的swiper组件 写了几行之后发现有的代码不见了，调试代码之后发现swiper高度问题导致的 ，swiper默认高度150 超出之后隐藏了查询之后发现sweiper无法设置动态高度，只能设置固定高度，百度了之后网上有几种方法，试过之后都不太好用 试过百度的2种方法： 1 在swiper之间嵌套scorll-view 这个需要先获取屏幕高度 用了之后发现不好使 弃用 2 在swiper-item 的内容部的前后加俩个空标签 来获取内容高度 实验之后发...
微信小程序-禁止页面下拉回弹
1234Wu--Blog
05-10 1528
微信小程序-禁止页面下拉回弹,主要是。
swiperJS滑动时监听事件
cc蒲公英的博客
11-22 1928
swiperJS滑动时监听事件
swiper自动轮播可滑动
海北军
02-12 9956
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值