# swiper組件 swiper是一個**滑塊視圖容器**。即: **輪播圖**組件或者**焦點圖**組件。swiper這個組件封裝的已經比較完善，使用起來非常方便。 ***** | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | --- | --- | --- | --- | --- | | indicator-dots | Boolean | false | 是否顯示面板指示點 | | | indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | autoplay | Boolean | false | 是否自動切換 | | | current | Number | 0 | 當前所在頁面的 index | | | interval | Number | 5000 | 自動切換每一頁時間的間隔 | | | duration | Number | 500 | 滑動一頁時的動畫時長 | | | circular | Boolean | false | 是否采用銜接滑動（ loop ） | | | vertical | Boolean | false | 滑動方向是否為縱向 | | | bindchange | EventHandle | | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} | ***** ### swiper組件的使用 > **注意**：swiper只中可放置swiper-item組件，否則會導致未定義的行為。swiper-item的寬度自定設計為100%。 ***** ``` banners:[ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ] ``` ``` <!-- indicator-dots是否顯示指示點 indicator-color指示點的顏色 indicator-active-color當前選中指示點的顏色--> <!-- autoplay是否自動輪播 i nterval自動切換的時長。默認為5秒 circular 是否無縫連接 vertical是否為縱向輪播，默認為false--> <swiper indicator-dots indicator-color="#fff" indicator-active-color="yellow" autoplay interval="3000" circular > <swiper-item wx:for = "{{banners}}" wx:key = "index"> <image src = "{{item}}"></image> </swiper-item> </swiper> ```