小程序<swiper>轮播图组件自定义面板

思路：

1.不开启面板指示点

2.自定义面板样式，通过bindchange来改变点击状态及滑动

js

Page({
	data:{
		slideList:[
                      { selected: true,  css: 'background:#999' },
                      { selected: false, css: 'background:pink' },
                      { selected: false, css: 'background:green' },
                    ],
                slideCurrent:0  //用来定义当前轮播图的index
	        },
                  change:function(e){    //轮播图改变的时候触发
                       var selectedList = this.data.slideList;
                       for(var i=0;i<selectedList.length;i++){
                          var selected = "slideList[" + i + "].selected"; //用this.setData修改数组中对象的变量
                          if (i == e.detail.current){
                            this.setData({ [selected] : true}); //修改数组中对象的变量 加[]
                          }else{
                            this.setData({ [selected]: false });
                          }
                        }
                },
                  changedots : function(e){  //点击指示点 切换轮播图
                    var index = e.currentTarget.dataset.index; //当前点击的index
                    this.setData({ slideCurrent: index});
                    var selectedList = this.data.slideList;
                    for (var i = 0; i < selectedList.length; i++) {
                      var selected = "slideList[" + i + "].selected";
                      if (i == index) {
                        that.setData({ [selected]: true });
                      } else {
                        that.setData({ [selected]: false });
                      }
                    }
                  },

wxss

.tab {width: 300px; justify-content: center}
.item {width: 40px;border: 1px solid red;margin:5px; }
.item.selected {width: 40px;border: 1px solid black;margin:5px; }

wxml

<view class='slideBox' style='position:relative'>
  <swiper class='banner' style='width:300px;height:300px;border:1px solid red' bindchange='change' autoplay duration='3000' interval='5000' circular current='{{slideCurrent}}'>
    <block wx:for="{{slideList}}">
      <swiper-item style="{{item.css}}">{{index+1}}</swiper-item>
    </block>
  
  </swiper>
  <!-- 面板指示点 -->
  <view class='tab' style='height:40px;position:absolute;bottom:0;display:flex'>
    <block wx:for="{{slideList}}">  <!--用class来决定选择的状态-->
      <view wx:if="{{item.selected}}" class='item selected' bindtap='changedots' data-index="{{index}}">{{index+1}}</view>
      <view wx:else class='item' bindtap='changedots' data-index="{{index}}">{{index+1}}</view>
    </block>
  </view>
</view>