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

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

WXML:

WXSS:

1. swiper{
2.  
3. position:relative;
4.  
5. height:300rpx;
6.  
7. }
8.  
9. swiperimage{
10.  
11. display:block;
12.  
13. width:100%;
14.  
15. height:300rpx;
16.  
17. cursor:pointer;
18.  
19. }
20.  
21. swiper.arrow{
22.  
23. width:30rpx;
24.  
25. height:46rpx;
26.  
27. }
28.  
29. swiper.prev{
30.  
31. position:absolute;
32.  
33. left:0;
34.  
35. top:50%;
36.  
37. transform:translate(0,-50%);
38.  
39. cursor:pointer;
40.  
41. }
42.  
43. swiper.next{
44.  
45. position:absolute;
46.  
47. right:0;
48.  
49. top:50%;
50.  
51. transform:translate(0,-50%);
52.  
53. }
54.  
55. JS:
56.  
57. //index.js
58.  
59. Page({
60.  
61. data: {
62.  
63. swiper: {
64.  
65. imgUrls: [
66.  
67. '/images/swiper01.jpg',
68.  
69. '/images/swiper02.jpg',
70.  
71. '/images/swiper03.jpg'
72.  
73. ],
74.  
75. indicatorDots:true,
76.  
77. autoplay:false,
78.  
79. interval:5000,
80.  
81. duration:1000,
82.  
83. current:0,
84.  
85. }
86.  
87. },
88.  
89. prevImg:function(){
90.  
91. varswiper =this.data.swiper;
92.  
93. varcurrent = swiper.current;
94.  
95. swiper.current= current>0? current-1: swiper.imgUrls.length-1;
96.  
97. this.setData({
98.  
99. swiper: swiper,
100.  
101. })
102.  
103. },
104.  
105. nextImg:function() {
106.  
107. varswiper =this.data.swiper;
108.  
109. varcurrent = swiper.current;
110.  
111. swiper.current= current < (swiper.imgUrls.length-1) ? current +1:0;
112.  
113. this.setData({
114.  
115. swiper: swiper,
116.  
117. })
118.  
119. }
120.  
121. })