前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。
思路很简单:在swiper组件内部添加两个image组件,绑定点击事件,动态改变swiper中的current值。不废话,主要看代码:
WXML:
<swiper indicator-dots="{{swiper.indicatorDots}}"
autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current='{{swiper.current}}' circular="true">
<block wx:for="{{swiper.imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
<image class='prev arrow' bindtap='prevImg' src='/images/prev.jpg' />
<image class='next arrow' bindtap='nextImg' src='/images/next.jpg' />
</swiper>
WXSS:
swiper{
position: relative;
height: 300rpx;
}
swiper image{
display: block;
width: 100%;
height: 300rpx;
cursor: pointer;
}
swiper .arrow{
width: 30rpx;
height: 46rpx;
}
swiper .prev{
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
}
swiper .next{
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
JS:
//index.js
Page({
data: {
swiper: {
imgUrls: [
'/images/swiper01.jpg',
'/images/swiper02.jpg',
'/images/swiper03.jpg'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000,
current: 0,
}
},
prevImg: function(){
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current>0 ? current-1 : swiper.imgUrls.length-1;
this.setData({
swiper: swiper,
})
},
nextImg: function () {
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
this.setData({
swiper: swiper,
})
}
})
看一下完成之后的效果:
貌似还不错,有用到这功能的同学,直接copy代码运行即可~
欢迎交流技术问题,群人数已满100,可添加小助手:
这个方法,在点击右边的箭头时候,可以实现很好的链接,但是在点击左侧的时候,确实存在链接不和谐的问题。
最后一个和第一个切换, 怎么衔接
你这个有个bug啊,切换图标应该放在swiper外面
很好,很强大