swiper切换按钮位置改变_2019-01-18左右按钮控制swiper轮播图切换

今天需要实现一个左右按钮控制轮播图滚动的效果！

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

})

}

}