swiper组件添加左右箭头

前言：小程序官方swiper组件并未提供带左右箭头功能，但有些时候还是想把左右箭头添加上，今天连胜老师就给大家分享一下自己的实现方式。

思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变swiper中的current值。不废话，主要看代码：

WXML:

WXSS:

swiper{

position:relative;

height:300rpx;

}

swiperimage{

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(){

varswiper =this.data.swiper;

varcurrent = swiper.current;

swiper.current= current>0? current-1: swiper.imgUrls.length-1;

this.setData({

swiper: swiper,

})

},

nextImg:function() {

varswiper =this.data.swiper;

varcurrent = 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，备注知晓程序员哦，欢迎讨论问题 & 一起探讨小程序人生~~

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