swiper是微信小程序的一個(gè)滑動(dòng)組件,非常重要。如果只是做簡(jiǎn)單的輪播圖而不進(jìn)行復(fù)雜的邏輯,直接可以使用,甚至不需要知道組件的方法。
今天在做一個(gè)如下的頁(yè)面時(shí),快速滑動(dòng)swiper出現(xiàn)了問(wèn)題:
控制臺(tái)打印,發(fā)現(xiàn)bindChange綁定的方法重復(fù)執(zhí)行了,我們?cè)倏垂俜轿臋n的解釋?zhuān)?/p>
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
而我們的bindChange確實(shí)使用了setData(),來(lái)保證swiper組件的current屬性與我們的this.data.index同步。為什么要有this.data.index這個(gè)變量?是因?yàn)槲覀円@得當(dāng)前的頁(yè)數(shù)進(jìn)行其他的操作。比如上圖底部的slider就用到這個(gè)變量。但是這個(gè)變量必須在bindChange進(jìn)行同步。
至此,我們的程序在快速滑動(dòng)的時(shí)候是有問(wèn)題的。不斷觸發(fā)setData()。此外,在官方的開(kāi)發(fā)社區(qū)找到這么一條:
后來(lái)一想,在bindChange改變swiper的current是有問(wèn)題的,那么,改變另外的變量呢?答案是沒(méi)有問(wèn)題的。
那么,我們的做法是,data里定義2個(gè)變量:
data{ cur:0,//改變當(dāng)前索引 index: 0//當(dāng)前的索引 }
當(dāng)前的頁(yè)數(shù)用index來(lái)標(biāo)記。swiper組件的current屬性我們用變量cur?;ゲ桓蓴_。當(dāng)頁(yè)面變化時(shí),我們?cè)O(shè)置index,當(dāng)我們需要改變頁(yè)面時(shí),我們?cè)O(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è)問(wèn)題的出路就是,不要想著用一個(gè)變量作為swiper的current和當(dāng)前頁(yè)碼的標(biāo)記。一旦分開(kāi)這2個(gè)變量,問(wèn)題就解決了。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)