關于小程序swiper的問題

代碼

在官方示例上給swiper添加了current``bindchange``circular
添加了一個button``bindtap用于切換下一張

index.wxml

<swiper indicator-dots="{{indicatorDots}}"bindchange="swiperChange"current="{{index}}"circular="true"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item></block> </swiper> <button bindtap="changeIndicatorDots"> indicator-dots </button> <button bindtap="changeAutoplay"> autoplay </button> <button bindtap="nextSwiper"> 下一張 </button> <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration復制代碼

index.js

/*** create by ZenoTian*/ Page({data: {imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,index: 2},changeIndicatorDots: function(e) {this.setData({indicatorDots: !this.data.indicatorDots})},nextSwiper: function (e) {let {index} = this.dataindex === 2?index = 0:index++console.log(`下一張：${index}`)this.setData({index})},changeAutoplay: function(e) {this.setData({autoplay: !this.data.autoplay})},intervalChange: function(e) {this.setData({interval: e.detail.value})},durationChange: function(e) {this.setData({duration: e.detail.value})},swiperChange: function (e) {console.log('bindchange事件', `this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)} })復制代碼

問題1：手動賦值current值，銜接滑動無效

點擊下一張，通過給setData改變swiper的current值,在從最后一張切換至第一張時，雖然設置了circular，但是不會有銜接滑動的效果，而是從尾部一路溜到了頭。

問題2：綁定的current的值，滑動并不會改變

通過給swiper的current綁定了this.data.index
默認值是生效的，但是在手滑滑塊的時候，并不會自動改變this.data.index的值。
通過bindchange的打印可以看出來。this.data.index的值是永遠不會變的。
所以這時候current和this.data.index是不照應的。

例如：向右滑動

bindchange事件 this.data.index:2 e.detail.current:1 bindchange事件 this.data.index:2 e.detail.current:0 bindchange事件 this.data.index:2 e.detail.current:2 bindchange事件 this.data.index:2 e.detail.current:1 bindchange事件 this.data.index:2 e.detail.current:0復制代碼

在官方文檔中

如果在 bindchange 的事件回調函數中使用 setData 改變 current 值，則有可能導致 >setData 被不停地調用，因而通常情況下請不要這樣使用

如果想讓current和this.data.index對照，還是需要在bindchange 的事件回調函數中使用setData改變current值。

swiperChange: function (e) {console.log('bindchange事件',`this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)this.setData({index: e.detail.current})}復制代碼

問題3：控制current的值切換，與滑動切換代碼結果不一樣

如果采取了在bindchange 的事件回調函數中使用setData改變current值。
點擊下一張：給this.data.index賦值后觸發的bindchange事件回調中的，this.data.index與e.detail.current的值相同。

下一張：0 bindchange事件 this.data.index:0 e.detail.current:0 下一張：1 bindchange事件 this.data.index:1 e.detail.current:1 下一張：2 bindchange事件 this.data.index:2 e.detail.current:2 下一張：0 bindchange事件 this.data.index:0 e.detail.current:0 下一張：1 bindchange事件 this.data.index:1 e.detail.current:1復制代碼

手動滑動時：bindchange事件回調中的，this.data.index的值會是上一次的值

bindchange事件 this.data.index:2 e.detail.current:1 bindchange事件 this.data.index:1 e.detail.current:0 bindchange事件 this.data.index:0 e.detail.current:2 bindchange事件 this.data.index:2 e.detail.current:1 bindchange事件 this.data.index:1 e.detail.current:0復制代碼

轉載于:https://juejin.im/post/59c370e2f265da0672284260

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的关于微信小程序swiper的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。