给小程序的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.jsPage({  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代码运行即可~

往期回顾

1.小程序开放网页功能，你读懂了嘛？

2.小程序风云榜|重要通知、小小签到、微友名片

3.1024程序员节

4.小程序有哪些优势，你都知道嘛？

5.如何确保行政的同学发布的通知，所有人都已查看？

6.为什么那么多人要做小程序？

知晓程序员 ，一个专注于微信小程序开发的程序员~

如果对小程序技术感兴趣，欢迎勾搭连胜老师，微信：13718712821，备注知晓程序员 哦，欢迎讨论问题 & 一起探讨小程序人生~~

扫描下方二维码 ，关注知晓程序员，实时了解小程序动态 & 小程序开发相关内容~