swiper是微信小程序的一個(gè)滑動(dòng)組件，非常重要。如果只是做簡單的輪播圖而不進(jìn)行復(fù)雜的邏輯，直接可以使用，甚至不需要知道組件的方法。
今天在做一個(gè)如下的頁面時(shí)，快速滑動(dòng)swiper出現(xiàn)了問題：

控制臺(tái)打印，發(fā)現(xiàn)bindChange綁定的方法重復(fù)執(zhí)行了，我們再看官方文檔的解釋：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

而我們的bindChange確實(shí)使用了setData()，來保證swiper組件的current屬性與我們的this.data.index同步。為什么要有this.data.index這個(gè)變量？是因?yàn)槲覀円@得當(dāng)前的頁數(shù)進(jìn)行其他的操作。比如上圖底部的slider就用到這個(gè)變量。但是這個(gè)變量必須在bindChange進(jìn)行同步。

至此，我們的程序在快速滑動(dòng)的時(shí)候是有問題的。不斷觸發(fā)setData()。此外，在官方的開發(fā)社區(qū)找到這么一條：

后來一想，在bindChange改變swiper的current是有問題的，那么，改變另外的變量呢？答案是沒有問題的。

那么，我們的做法是，data里定義2個(gè)變量：

data{
 cur:0,//改變當(dāng)前索引
 index: 0//當(dāng)前的索引
}

當(dāng)前的頁數(shù)用index來標(biāo)記。swiper組件的current屬性我們用變量cur。互不干擾。當(dāng)頁面變化時(shí)，我們設(shè)置index,當(dāng)我們需要改變頁面時(shí)，我們設(shè)置cur.index和cur是不同步的。

<swiper
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="swiperChange"
current="{{cur}}">

swiperChange(e){
 let current = e.detail.current;
 let source = e.detail.source
 //console.log(source);
 console.log(current,this.data.index,this.data.cur)
 this.setData({
 index:current
 })

這個(gè)問題的出路就是，不要想著用一個(gè)變量作為swiper的current和當(dāng)前頁碼的標(biāo)記。一旦分開這2個(gè)變量，問題就解決了。