思路:
wxml
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>