小程序控件之轮播图片

今天做了个小程序轮播的插件，有需要的同学可以直接拿过去用，只用改动itemList中的数据源中的src即可
index.js（不完美的）

Page({
  data:{
    initSrcoll:0,
    autoplay:true,
    autochange:0,
    itemList:[
      {
        selected:true,src:"../image/1.jpg",
      },
      {
        selected: false,src: "../image/2.jpg",
      },
      {
        selected: false, src: "../image/3.jpg",
      },
      {
        selected: false, src: "../image/4.jpg",
      }
    ]
  },
  change:function(event){
    var list = this.data.itemList;;
    var listsize = this.data.itemList.length;

    for(var i=0;i<listsize;i++){

      if (event.detail.current ==i) {
        list[i].selected = true;
      } else {
        list[i].selected = false;
      }
    }
    this.setData({
      itemList: list,
      autochange: event.detail.current
    });
  },
  changed: function () {
    var list = this.data.itemList;
    var autochange = this.data.autochange;
    var listsize = this.data.itemList.length;

    autochange++;
    if (autochange >= listsize) {
      autochange= 0;
    }
    for (var i = 0; i < listsize; i++) {
      if (autochange== i) {
        list[i].selected = true;
      } else {
        list[i].selected = false;
      }
    }
    this.setData({
      itemList: list,
      autochange: autochange
    });
  },
  switchClick:function(){
    this.setData({
      autoplay: !this.data.autoplay
    });
  }
})

刚开始做的时候我是把change方法和changed方法中的change属性都用的index.wxml中的autochange这个属性，结果运行发现会出现循环调用导致轮播飞快的来回刷，原因是当我点击切换时，由于切换的函数中绑定的也是autochange，小程序会自动调用change的方法，从而导致它们的来回调用会影响轮播效果。
index.js（完美的）

Page({
  data:{
    initSrcoll:0,
    autoplay:true,
    autochange:0,
    change:0,//注意这里加了个中间变量提供给changed使用
    itemList:[
      {
        selected:true,src:"../image/1.jpg",
      },
      {
        selected: false,src: "../image/2.jpg",
      },
      {
        selected:false,src:"../image/3.jpg",
      },
      {
        selected: false,src: "../image/4.jpg",
      }
    ]
  },
  change:function(event){
    var list = this.data.itemList;;
    var listsize = this.data.itemList.length;
    var change = this.data.change;
    change++;
    if (change >= listsize) {
      change = 0;
    }
    for(var i=0;i<listsize;i++){

      if (event.detail.current ==i) {
        list[i].selected = true;
      } else {
        list[i].selected = false;
      }
    }
    this.setData({
      itemList: list,
      change: change
    });
  },
  changed: function () {
    var list = this.data.itemList;
    var change = this.data.change;
    var listsize = this.data.itemList.length;

    change++;
    if (change >= listsize) {
      change = 0;
    }
    for (var i = 0; i < listsize; i++) {
      if (change== i) {
        list[i].selected = true;
      } else {
        list[i].selected = false;
      }
    }
    this.setData({
      itemList: list,
      autochange: change
    });
  },
  switchClick:function(){
    this.setData({
      autoplay: !this.data.autoplay
    });
  }
})

这个就完美的解决了点击来回播放的效果，很棒！！
index.wxml

<view class="customSwiper">
  <swiper class="swiper-con" autoplay="{{autoplay}}" current="{{autochange}}" circular="true" interval="2000" duration="300" bindchange="change">
    <block wx:for="{{itemList}}">
      <swiper-item>
        <image style="width:100%;height:100%;" src="{{item.src}}" />
      </swiper-item>
    </block>
  </swiper>
  <view class="tab">
    <block wx:for="{{itemList}}">
      <view wx:if="{{item.selected}}" class="tab-item selected">{{index+1}}</view>
      <view wx:else class="tab-item">{{index+1}}</view>
    </block>
  </view>
</view>
<view>
  <button bindtap="changed">切换</button>
</view>
<view>
  <button bindtap="switchClick">暂停/开始</button>
</view>

index.wxss

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue;
}

.tab-item.selected {
  background: red;
}

.tab-item {
  background: #ccc;
  height: 50rpx;
  width: 50rpx;
  border-radius: 4px;
  margin: 2px;
  line-height: 50rpx;
  margin-right: 10px;
}

.tab {
  align-items: center;
  justify-content: center;
  height: 70rpx;
  position: absolute;
  width: 100%;
  display: flex;
  text-align: center;
  bottom: 0;
}

.customSwiper {
  height: 379.5rpx;
  position: relative;
}

.swiper-con {
  height: 100%;
}