小程序swiper组件的bindchange方法重复执行问题（解决真机无限滑动问题）

最新推荐文章于 2024-08-06 14:26:07 发布

钟Bubble

最新推荐文章于 2024-08-06 14:26:07 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小知识文章标签：小程序 html5 前端微信小程序 javascript

本文链接：https://blog.youkuaiyun.com/BubbleABC/article/details/122809394

本文介绍了微信小程序中swiper组件在bindchange事件触发时出现重复执行的问题，特别是真机上可能出现的无限滑动现象。针对这一问题，提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修正方法

<swiper
autoplay="{
    
    {autoplay}}"
interval="{
    
    {interval}}"
duration="{
    
    {duration}}"
bindchange

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钟Bubble

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序里swiper 中bindchange事件中设置setdata赋值出现问题

weixin_44363139的博客

11-02

2674

最近在开发微信小程序的时候碰到一个问题就是bindchange事件发生了赋值问题看到官方文档是这样写的 change事件 source 返回值从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下： autoplay 自动播放导致swiper变化； touch 用户划动引起swiper变化；其它原因将用空字符串表示。 Bug & Tip tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致

微信小程序日历组件（swiper可滑动的日历）

BubbleABC的博客

02-07

2122

可滑动的日历组件根据现实需求自行调整其他 rili.wxml页面  <view class="rili"> </view> <view class='month'>  <view class="shijian">

1 条评论您还未登录，请先登录后发表或查看评论

小程序swiper组件的bindchange方法重复执行问题

weixin_30648587的博客

06-06

463

这是官方文档的说法给出了swiper组件一直来回滑动的bug原因以下是修正方法 <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{current}}"> swiperCh...

swiper 绑定点击事件，点击失效的处理以及事件会触发两次问题

MrQiu的博客

08-17

9105

1.前言一般我们写点击事件，都习惯绑定在标签上。img或者外层的div上。这样在loop为false的时候，是没有问题的。当设置loop为true，就有bug了。你会发现当前图片列表循环完一遍，回到第一张的时候，图片的点击事件是无效的，或者是点击很多次才会触发事件。 2.原因设置swiper自动轮播后，你会发现浏览器中渲染的swiper-slide已经不是你数据中的个数了。组件会自动复制第一个和最后一个进行轮播，从而实现无缝连接。但由于只复制slide没有复制点击事件，所以在循环一周回来遇到复制

微信小程序swiper bindChange重复执行

weixin_34029949的博客

04-27

595

swiper是微信小程序的一个滑动组件，非常重要。如果只是做简单的轮播图而不进行复杂的逻辑，直接可以使用，甚至不需要知道组件的方法。今天在做一个如下的页面时，快速滑动swiper出现了问题：控制台打印，发现bindChange绑定的方法重复执行了，我们再看官方文档的解释： https://developers.weixin.qq.com/miniprogram/dev/compon...

微信小程序swiper组件设置滚动监听(bindchange)导致swiper item闪烁、跳动、卡住BUG。

weixin_40336827的博客

04-23

7021

最近在使用swiper的时候，下拉刷新后导致swiper item不断的跳动卡住。一开始以为是下拉刷新导致的，后面在开发社区看到相关的问题，是由于swiper导致的。在手动滑动swiper时打出以下消息：而自动轮播的detail->source 是autoplay 在拖动的时候和自动轮播产生了冲突，导致setData方法不断被调用。所以swiper i...

【微信小程序实战教程】之微信小程序核心组件详解

柯晓楠

08-06

2365

组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有视图层的展示，就必定要用到组件化。组件是视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。视图容器组件主要用于控制页面的内容，与HTML中的标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在

微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换

weixin_39774491的博客

02-05

2392

一、前言swiper组件自带autoplay切换，本文将会介绍如何用到左右按钮切换轮播图，以及如何解决快速点击按钮出现的bug。核心属性circular：负责切换衔接的效果(否则最后一张与第一张的切换体验很差)current：控制当前显示的页index索引autoplay：是否自动播放，此处我们选择false(或者默认不写)duration：切换页所需要花的时间，一般为1000即1秒bindc...

滑动选项卡-微信小程序

05-22

在微信小程序中，滑动选项卡通常由`<swiper>`组件和`<swiper-item>`组件组合实现。一、`<swiper>`组件详解 `<swiper>`是微信小程序中用于展示轮播图或滑动选项卡的核心组件，它可以创建一个可滑动的容器，内部可以...

解决微信小程序swiper组件bindchange事件抖动问题

记录本人工作中遇到的问题、经验总结以及分享。

05-11

1591

根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug // 轮播change事件 swiperChange(e) { console.log(e); var _this = this; var swiperIndex = e.detail.current; var so..

bindchange 参数_微信小程序bindchange是什么事件？

热门推荐

weixin_33001561的博客

12-31

1万+

展开全部bindChange 为输入框发生改变事件。微信提供的e68a84e8a2ad62616964757a686964616f31333431363033 bindchange 在支持方面还有小问题，目前是失去焦点才能触发到此事件的发生。如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况...

使用Swiper不正常滚动或能一直无限滚动的问题

weixin_45754070的博客

02-15

1774

上面就是我遇到的问题因为加了这个隐藏，可能和Swiper插件中的样式起冲突了 1. 看需不需要这样式如果不需要就去除该样式就会生效 2. 进行条件判断如果是当前的index就使用Swiper插件。Swiper但是不能直接的使用，因为会找不到，需要在外面赋值 var SWIPER = Swiper; function swiperInit() { var Swiper = new SWIPER('.swiper2', { on: {

swiper切换同时更换背景色

anjignren的博客

07-23

1347

前言：最近做一个项目，甲方爸爸展示了一个案例，说轮播图切换的时候，同时背景色也要改变。所以，便写了一个demo。话不多说，看效果图直接上代码： <template> <view class="content"> <view class="swiper_bg" :style="swiperbg"> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="

关于swiper滑动触发事件

IT_iosers的博客

10-11

9444

onSlideChangeStart(swiper) swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数 onSlideChangeEnd(swiper) swiper从一个slide过渡到另一个slide结束时执行。用法：通过滑动控制标签页的高亮 <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{

微信小程序之swiper bindchange 陷入死循环的解决方法

qq_41194534的博客

04-29

1351

背景说明由于公司需求需要，需要按照返回值设置当前swiper 的curren值，造成swiper的闪烁、抖动问题，现在分享出来我的解决方案先来查看swiper 的一些事件方法属性类型默认值必填说明 bindchange eventhandle 否 current 改变时会触发 change 事件，event.detail = {current, source} ...

微信小程序swiper组件卡死来回疯狂轮播

系咩的个人收藏博客

12-11

4992

设置current为bindchange事件触发的e.detail.current，发现长时间停留或者快速来回滚动的时候容易偶现导致轮播图组件出错疯狂滚动，打印e.detail.current可以发现来回切换的速度非常快已经超过了设置的2000ms。解决的办法是current赋值的index改由bindanimationfinish触发的e.detail.current 还有的是自己...

bindchange 参数_微信小程序toast组件中bindchange事件触发条件

weixin_32121931的博客

01-26

2376

微信小程序toast组件是一种消息提示框。例如当文章条数全部加载出来后，用户再次点击加载更多的时候，js判断文章条数全部加载出来后，便让toast组件弹出提示用户“没有更多文章了”，效果如下图所示：代码实现index.wxml1 //点击加载更多，执行js里的loadMore函数2 加载更多34 //hidden接收js传递过来的toastHidden变量值，为true，toast隐藏；为fals...

小程序swiper标签监听tabs下方左右切换

李嘉帅的博客

08-13

393

小程序swiper标签

微信小程序 swiper 把circular="{{true}}" 的时候在重新加载数据，有一个地方会为空circular="{{false没有事}}"

最新发布

04-03

<think>好的，我现在需要解决用户的问题：微信小程序中swiper组件在动态切换circular属性时出现数据重新加载导致的空白问题。用户希望找到解决方案。首先，我得回忆一下swiper组件的使用和相关属性，尤其是circular的作用。circular设置为true时，轮播会循环播放，当滑动到最后一张时能平滑回到第一张，反之则不能。根据用户提供的引用，引用[1]提到在旧版本基础库中，右滑到最后一张时衔接有问题，但真机上可能正常。这可能和动态切换circular时的渲染有关。引用[3]中提到了circular="true"以及previous-margin和next-margin的设置，这些可能影响布局。用户的问题是动态切换circular时数据重新加载导致空白。可能的原因是什么呢？当circular动态变化时，swiper可能需要重新计算子项的位置和布局，尤其是当从非循环切换到循环时，可能需要添加额外的节点来实现循环效果，这可能导致组件重新渲染，如果数据没有正确更新或绑定，就会出现空白。解决方案的思路可能包括：确保数据正确绑定，避免在切换circular时重新加载数据；使用wx:if或hidden控制swiper的显示，减少频繁的创建和销毁；或者在切换时先重置current值，再设置新的circular值，以触发正确的渲染。此外，引用[3]中的circular和previous-margin的设置，可能影响布局计算，需要确保这些样式在动态切换时不会导致布局错误。可能还需要在切换circular后调用swiper的update方法，但小程序是否有这样的API呢？或者可能需要重置current值来强制更新。另外，数据加载的问题，可能是在切换circular时触发了重新请求数据，导致数据为空或未准备好。需要检查数据加载的逻辑，确保切换时数据已经存在，或者使用缓存避免重复加载。总结可能的解决方案步骤： 1. 使用wx:if或hidden管理swiper的显示，避免频繁销毁创建。 2. 在切换circular前重置current为0，再设置新的circular值。 3. 确保数据在切换前已经加载完成，使用缓存或提前加载。 4. 检查样式设置，如previous-margin等是否在动态切换时影响布局。 5. 使用setTimeout延迟切换，确保渲染完成。然后需要验证这些方法的可行性，比如先尝试在切换circular时重置current，看看是否有效。或者使用hidden代替动态修改circular，保持swiper实例不变，减少重新渲染。同时，确保数据绑定正确，不会因为circular的变化而重新加载数据源。可能还需要参考小程序的官方文档，看看是否有关于动态修改circular的注意事项，或者社区中是否有类似的问题和解决方案。比如引用[1]中提到的问题可能与基础库版本有关，所以也需要检查用户的基础库版本是否较旧，建议升级。最后，综合这些思路，整理出一个步骤清晰的解决方案，确保用户能够一步步实施，解决空白问题。</think>### 微信小程序 swiper 组件动态切换 circular 属性导致数据加载异常的解决方案 #### 问题原因分析动态设置 `circular` 属性时，若数据源或布局未正确同步，可能导致以下问题： 1. **循环模式切换时布局错乱**：从非循环模式（`circular=false`）切换到循环模式时，swiper 需插入首尾衔接节点，若数据未及时更新或样式未适配，会出现空白[^3]。 2. **数据重新加载触发渲染异常**：切换 `circular` 时若伴随数据源变化，可能因异步加载导致 swiper 子项未及时渲染。 3. **基础库版本兼容性**：旧版本基础库存在循环滑动衔接问题（官方已知问题），动态切换时可能加剧异常[^1]。 --- #### 分步解决方案 ##### 1. **保持 swiper 实例稳定性** 使用 `wx:if` 或 `hidden` 控制 swiper 的显隐，避免频繁销毁重建： ```html  <swiper hidden="{{!useCircular}}" circular="{{true}}" ...>  </swiper> <swiper hidden="{{useCircular}}" circular="{{false}}" ...>  </swiper> ``` - **优势**：避免动态切换 `circular` 时重新初始化 swiper，减少渲染异常。 ##### 2. **重置当前索引并延迟切换** 切换 `circular` 前重置 `current` 索引，并添加延迟确保渲染完成： ```javascript Page({ data: { current: 0, circular: false }, // 切换 circular 的方法 toggleCircular() { this.setData({ current: 0, // 重置索引 circular: false // 先强制设置为非循环 }, () => { setTimeout(() => { this.setData({ circular: true }); // 延迟设置目标模式 }, 50); // 确保布局计算完成 }); } }) ``` ##### 3. **数据预加载与缓存** 确保数据在切换前已完整加载，避免异步加载导致空白： ```javascript // 提前加载数据并缓存 loadData() { wx.request({ url: 'your_api', success: (res) => { this.setData({ list: res.data }); this.toggleCircular(); // 数据就绪后再切换 circular } }) } ``` ##### 4. **样式适配与版本检查** - **样式调整**：动态切换时需确保 `previous-margin` 和 `next-margin` 属性与 `circular` 模式匹配。 - **基础库升级**：在项目配置中指定高版本基础库（建议 2.12.0+），避免旧版本循环滑动 bug[^1]。 --- #### 完整代码示例 ```html <swiper circular="{{circular}}" current="{{current}}" previous-margin="{{circular ? '50px' : '0'}}" next-margin="{{circular ? '50px' : '0'}}" bindchange="onSwiperChange" > <block wx:for="{{list}}" wx:key="id"> <swiper-item> <image src="{{item.url}}" mode="aspectFill" /> </swiper-item> </block> </swiper> <button bindtap="toggleCircular">切换循环模式</button> ``` ```javascript Page({ data: { list: [], current: 0, circular: false }, onLoad() { this.loadData(); }, loadData() { // 模拟异步加载数据 setTimeout(() => { this.setData({ list: [...] }); // 填充数据 }, 500); }, toggleCircular() { if (this.data.list.length === 0) return; this.setData({ current: 0, circular: false }, () => { setTimeout(() => { this.setData({ circular: !this.data.circular }); }, 50); }); } }) ``` ---