#### 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 | | | current-item-id | String | "" | 當前所在滑塊的 item-id ，不能與 current 被同時指定 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | interval | Number | 5000 | 自動切換時間間隔 | | | duration | Number | 500 | 滑動動畫時長 | | | circular | Boolean | false | 是否采用銜接滑動 | | | vertical | Boolean | false | 滑動方向是否為縱向 | | | previous-margin | String | "0px" | 前邊距，可用于露出前一項的一小部分，接受 px 和 rpx 值 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | next-margin | String | "0px" | 后邊距，可用于露出后一項的一小部分，接受 px 和 rpx 值 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | display-multiple-items | Number | 1 | 同時顯示的滑塊數量 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | skip-hidden-item-layout | Boolean | false | 是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bindchange | EventHandle | | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} | | | bindanimationfinish | EventHandle | | 動畫結束時會觸發 animationfinish 事件，event.detail 同上 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | 從 [1.4.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) 開始，`change`事件返回`detail`中包含一個`source`字段，表示導致變更的原因，可能值如下： - `autoplay` 自動播放導致swiper變化； - `touch` 用戶劃動引起swiper變化； - 其他原因將用空字符串表示。 **注意**：其中只可放置`<swiper-item/>`組件，否則會導致未定義的行為。 #### swiper-item 僅可放置在`<swiper/>`組件中，寬高自動設置為100%。 | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | ------- | ------ | ---- | ------------------ | ---------------------------------------- | | item-id | String | "" | 該 swiper-item 的標識符 | [1.9.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | ##### 注意事項 tip: 如果在 bindchange 的事件回調函數中使用 setData 改變 current 值，則有可能導致 setData 被不停地調用，因而通常情況下請在改變 current 值前檢測 source 字段來判斷是否是由于用戶觸摸引起。 **自動滑動與動畫** ```html <swiper class="scrollWrapX" autoplay circular indicator-dots indicator-color="#fff" indicator-active-color="#ccc" current="1" interval="2000" duration="1000" display-multiple-items="1.5" bindchange="bindchange" bindanimationfinish="bindanimationfinish" > <block wx:for="{{[1,2,3]}}" wx:key="{{index}}"> <swiper-item class="scrollView"> {{item}} </swiper-item> </block> </swiper> ``` ```js Page({ bindchange (e) { console.log(e) console.log('bindchange') }, bindanimationfinish (e) { console.log(e) console.log('bindanimationfinish') } }) ``` ```css .scrollWrapY { height: 300rpx; background-color: #ccc; color: #fff; .scrollView { height: 200rpx; &:nth-child(1) { background-color: #f00; } &:nth-child(2) { background-color: #0f0; } &:nth-child(3) { background-color: #00f; } } } ``` :-: