今天需要实现一个左右按钮控制轮播图滚动的效果!
image.png
思路:我们可以尝试获取并改变current的值;
这是swiper滑动视图容器的说明
image.png
image.png
这是wxml代码
这是wxss
page{
background-color: #eff3f6;
}
/* 轮播图开始 */
.roll-out{
position: relative;
}
.roll{
width: 750rpx;
height: 310rpx;
}
swiper-item{
width: 100%;
height: 100%;
}
.roll-image{
width: 100%;
height: 100%;
}
.roll-out .toleft{
width: 30rpx;
height: 30rpx;
position: absolute;
top: 50%;
left: 36rpx;
border-right-color: transparent;
border-color: #fff;
border-width: 0 0 2px 2px;
border-style: solid;
transform: rotate(45deg) translateY(-50%);
}
.roll-out .toright{
width: 30rpx;
height: 30rpx;
position: absolute;
top: 50%;
right: 36rpx;
border-right-color: transparent;
border-color: #fff;
border-width: 2px 2px 0 0;
border-style: solid;
transform: rotate(45deg) translateY(-50%);
}
/* 轮播图结束 */
这是JS(只有关键的部分)
Page({
data: {
current:'0',
},
//省略若干行 !省略若干行 !省略若干行
//先获取当前的current
getCurrent: function(e){
this.setData({
current: e.detail.current
})
},
//向左滑动
toleft: function () {
if(this.data.current == '0'){
this.setData({
current: this.data.imgUrls.length - 1
})
}else{
this.setData({
current: this.data.current - 1
})
};
},
//向右滑动
toright: function(){
if (this.data.current == this.data.imgUrls.length - 1) {
this.setData({
current: '0'
})
} else {
this.setData({
current: this.data.current + 1
})
}
}