關(guān)于小程序swiper的問(wèn)題

代碼

在官方示例上給swiper添加了current``bindchange``circular
添加了一個(gè)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復(fù)制代碼

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}`)} })復(fù)制代碼

問(wèn)題1：手動(dòng)賦值current值，銜接滑動(dòng)無(wú)效

點(diǎn)擊下一張，通過(guò)給setData改變swiper的current值,在從最后一張切換至第一張時(shí)，雖然設(shè)置了circular，但是不會(huì)有銜接滑動(dòng)的效果，而是從尾部一路溜到了頭。

問(wèn)題2：綁定的current的值，滑動(dòng)并不會(huì)改變

通過(guò)給swiper的current綁定了this.data.index
默認(rèn)值是生效的，但是在手滑滑塊的時(shí)候，并不會(huì)自動(dòng)改變this.data.index的值。
通過(guò)bindchange的打印可以看出來(lái)。this.data.index的值是永遠(yuǎn)不會(huì)變的。
所以這時(shí)候current和this.data.index是不照應(yīng)的。

例如：向右滑動(dòng)

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復(fù)制代碼

在官方文檔中

如果在 bindchange 的事件回調(diào)函數(shù)中使用 setData 改變 current 值，則有可能導(dǎo)致 >setData 被不停地調(diào)用，因而通常情況下請(qǐng)不要這樣使用

如果想讓current和this.data.index對(duì)照，還是需要在bindchange 的事件回調(diào)函數(shù)中使用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})}復(fù)制代碼

問(wèn)題3：控制current的值切換，與滑動(dòng)切換代碼結(jié)果不一樣

如果采取了在bindchange 的事件回調(diào)函數(shù)中使用setData改變current值。
點(diǎn)擊下一張：給this.data.index賦值后觸發(fā)的bindchange事件回調(diào)中的，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復(fù)制代碼

手動(dòng)滑動(dòng)時(shí)：bindchange事件回調(diào)中的，this.data.index的值會(huì)是上一次的值

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復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/59c370e2f265da0672284260

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。