今天做了个小程序轮播的插件,有需要的同学可以直接拿过去用,只用改动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%;
}