收藏
评论

swiper组件添加左右箭头

前言:小程序官方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,可添加小助手:


最后一次编辑于  2018-02-27  (未经腾讯允许,不得转载)
复制链接收藏赞 1

4 个评论

  • 剼羹
    剼羹
    2018-05-21

    很好,很强大

    2018-05-21
    赞同
    回复
  • One
    One
    2018-07-25

    你这个有个bug啊,切换图标应该放在swiper外面

    2018-07-25
    赞同
    回复
  • 3
    3
    2018-08-09

    最后一个和第一个切换, 怎么衔接

    2018-08-09
    赞同
    回复
  • 『琦点』
    『琦点』
    2018-12-25

    这个方法,在点击右边的箭头时候,可以实现很好的链接,但是在点击左侧的时候,确实存在链接不和谐的问题。

    2018-12-25
    赞同
    回复