カルーセルの小さなマイクロチャネルプログラムの写真

ビジネスニーズ：画像が再生に変わり、あなたの周りにスライドすることができ、ポイントを示す切り替えるためには画像をクリック

本明細書で使用されるように提供したアプレット コンポーネントの
自動再生：自動再生
間隔：自動切替時間の
期間：のスライドアニメーションの長さ
のページ現在の位置：現在
bindchangeは：変更イベントをトリガしたときに電流変化
によるもの これは、追加のカスタムスタイル点を示す、点成分は比較的単純なパターンを提供示し

index.wxml：

<scroll-view  scroll-y="true">
      <swiper  catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}"  bindchange="swiperChange">
          <block wx:for="{{home_pics}}"  wx:for-index="index">
              <swiper-item>
                  <view class="ar_coverpath">
                    <image data-posturl="{{home_pics[index]}}" src="{{home_pics[index]}}"  bindtap="previewImage" mode="aspectFill"/>
                </view>
              </swiper-item>
          </block>
      </swiper>
      <!--  实现点击选中样式  -->
      <view class="dots">  
      <block wx:for="{{home_pics}}" wx:for-index="index">  
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>  
      </block>  
    </view> 
    </scroll-view>

index.js：

data: {
    swiperCurrent: 0
  },  
  //轮播图的切换事件  
  swiperChange: function (e) { 
    console.log(e); 
    this.setData({
      swiperCurrent: e.detail.current   //获取当前轮播图片的下标
    })
  },
  //点击指示点切换  
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },

//获取图片在onload就可以进行。

オリジナル：https://www.cnblogs.com/xuzhengzong/p/8056262.html