【小程序轮播】

效果图：

main.js:

data: {

    swiperCurrent: 0 

}, 

swiperChange: function (e) {

    console.log(e);

    this.setData({

      swiperCurrent: e.detail.current  //获取当前轮播图片的下标

    })

  },

  //点击指示点切换 

  changeIndex: function (e) {

    this.setData({

      swiperCurrent: e.currentTarget.id

    })

  }

main.wxml:

<scroll-view scroll-y="true">

  <swiper autoplay='true'  catchtap="onSwiperTap" interval="3000" duration="500" current="{{swiperCurrent}}"  bindchange="swiperChange">

    <block wx:for="{{allImages}}"  wx:for-index="index">

        <swiper-item>

          <view class="ar_coverpath">

            <image data-posturl="{{allImages[index]}}" src="{{allImages[index]}}"  bindtap="previewImage" mode="aspectFill"/>

        </view>

        </swiper-item>

    </block>

  </swiper>

    <!--  实现页面图片展示效果  -->

  <view class="dots"> 

    <block> 

      <view id="{{index}}">{{swiperCurrent+1}}/4</view> 

    </block> 

  </view>

    <!--  实现点击选中样式  -->

  <view class="dots"> 

      <block wx:for="{{allImages}}" wx:for-index="index"> 

        <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="changeIndex" id="{{index}}">{{index+1}}</view> 

      </block> 

    </view>

</scroll-view>