前言：小程序官方swiper組件并未提供帶左右箭頭功能，但有些時候還是想把左右箭頭添加上，今天連勝老師就給大家分享一下自己的實現(xiàn)方式。

思路很簡單：在swiper組件內(nèi)部添加兩個image組件，綁定點擊事件，動態(tài)改變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. })