微信小程序--swiper不顯示之current問題
2019/2/22
index.wxml文件
<swiper
? ? ? ? indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
? ? ? ? interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
? ? ? ? <block wx:for="{{imageArr}}" wx:key="*this">
? ? ? ? ? <swiper-item>
? ? ? ? ? ? <image src='{{item}}'></image>
? ? ? ? ? </swiper-item>
? ? ? ? </block>
</swiper>
index.js文件
Page({
? data: {
? ? indicatorDots: true,
? ? vertical: false,
? ? autoplay: false,
? ? circular: false,
? ? interval: 2000,
? ? duration: 500,
? ? previousMargin: 0,
? ? nextMargin: 0,
? ? imageArr:[
? ? ? 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
? ? ? 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
? ? ? 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
? ? ? 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'
? ? ]
? },
圖片數(shù)組 imageArr 動(dòng)態(tài)的改變數(shù)組的數(shù)量，
例如：當(dāng) imageArr 中的長(zhǎng)度為4，輪播滾動(dòng)到 3 ，current=3；此時(shí)swiper沒有綁定current，并將 imageArr 的長(zhǎng)度動(dòng)態(tài)改為2，這會(huì)出現(xiàn)current還是3，導(dǎo)致swiper不顯示的問題。
imageArr:[
'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
]
解決：
index.wxml 中在swiper中綁定current
<swiper
? ? ? ? current="{{current}}"
? ? ? ? indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
? ? ? ? interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
? ? ? ? <block wx:for="{{imageArr}}" wx:key="*this">
? ? ? ? ? <swiper-item>
? ? ? ? ? ? <image src='{{item}}'></image>
? ? ? ? ? </swiper-item>
? ? ? ? </block>
</swiper>
index.js 中增加current
data: {
? ? current: 0,
}
onShow(){
? ? this.setData({ current : 0 })
}
