微信小程序swiper组件卡死来回疯狂轮播
change
事件返回detail
中包含一个source
字段,表示导致变更的原因,可能值如下:
1.autoplay
自动播放导致swiper变化;
2.touch
用户划动引起swiper变化;
3. 其他原因将用空字符串表示
<view class="banner mgb24"> <swiper interval="{{interval}}" duration="{{duration}}" autoplay="{{autoplay}}" circular vertical="{{vertical}}" current="{{current}}" bindchange="swiperChange"> <swiper-item wx:for="{{banner}}" wx:key="ban" bindtap="navigato" data-url="{{item.url}}"> <image src="{{item.image}}" mode="aspectFit"></image> </swiper-item> </swiper> <view class="dot"> <block wx:for="{{banner}}" wx:key="ff"> <view class='dottt {{index==swiperCurrent?"active":""}}'></view> </block> </view> </view>
.banner{ position: relative; width: 100%; height: 290rpx; } .banner swiper{ width:100%; height:250rpx; border-radius:10rpx; } .banner .dot{ display:flex; justify-content:center; width:100%; position:absolute; bottom:16rpx; } .dottt{ width:20rpx; height:8rpx; border-radius:5rpx; background:#eee; margin:0 6rpx; } .active{ background: #59C069!important; }
以下是我的解决方法:
data:{ swiperCurrent:0, current:0, circular:true, vertical:false, autoplay: true, interval: 3000, duration: 1500, dots:true, } // 轮播图 swiperChange(e){ //普通 // this.setData({ // swiperCurrent: e.detail.current // }) //防止swiper控件卡死 if (this.data.current == 0 && this.data.swiperCurrent>1 ) {//卡死时,重置current为正确索引 this.setData({ current: this.data.swiperCurrent }); } else {//正常轮转时,记录正确页码索引 this.setData({ swiperCurrent: e.detail.current }); } },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】