微信小程序--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'

    ]

  },

图片数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致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 })

}