swiper?滑動面板(又稱滑塊視圖容器，常見的輪播圖)

注意：其中只可放置swiper-item組件，其他節點會被自動刪除

current改變時會觸發change事件，event.detail={current:current} 
注意：其中只可放置swiper-item組件，其他節點會被自動刪除

swiper-item

僅可放置在swiper組件中，寬高自動設置為100%

在.wxml文件中設置swiper

設置indicator-dots="true"顯示面板指示點，當前頁面為第4頁，每次頁面切換的時間為5000ms，滑動時長1000ms，綁定頁面改變觸發事件bindChange。頁面顯示的圖片在imgArray數組中，通過wx：for綁定。

1. <swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">
2.  
3. <block wx:for="{{imgArray}}">
4.  
5. <swiper-item>
6.  
7. <image src="{{item}}" class="img"></image>
8.  
9. </swiper-item>
10.  
11. </block>
12.  
13. </swiper>

在.wxsss中設置圖片的寬度

1. .img{
2.  
3. width:100%;
4.  
5. }

在.js中設置保存圖片的數組imgArray

1. Page({
2.  
3. data:{
4.  
5. imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',
6.  
7.  
8.  
9. 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',
10.  
11.  
12.  
13. 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',
14.  
15.  
16.  
17. 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']
18.  
19. },
20.  
21. 并執行changeCurren方法
22.  
23. changeCurrent:function(){
24.  
25. console.log("我滾動了");
26.  
27. }

運行結果：