网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序swiper bindChange重復執(zhí)行

發(fā)布時間:2018-05-09 15:55 所屬欄目:小程序開發(fā)教程

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

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

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

 

而我們的bindChange確實使用了setData(),來保證swiper組件的current屬性與我們的this.data.index同步。為什么要有this.data.index這個變量?是因為我們要獲得當前的頁數(shù)進行其他的操作。比如上圖底部的slider就用到這個變量。但是這個變量必須在bindChange進行同步。


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

 

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


那么,我們的做法是,data里定義2個變量:


data{
 cur:0,//改變當前索引
 index: 0//當前的索引
}

當前的頁數(shù)用index來標記。swiper組件的current屬性我們用變量cur。互不干擾。當頁面變化時,我們設置index,當我們需要改變頁面時,我們設置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
 })

這個問題的出路就是,不要想著用一個變量作為swiper的current和當前頁碼的標記。一旦分開這2個變量,問題就解決了。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24413.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×