大家看到許多網頁的首頁面都會有圖片的輪播，圖片輪播：既能通過圖片增加整個頁面的美觀程度，又能讓客戶一眼看出網頁想要表達的內容。那麼，今天我們就通過swiper實現圖片的輪播效果，簡單又好看。

/**wxml**/

<swiper 

indicator={{是否顯示面板指示點}}

indicator-color={{指示點顏色}}

indicator-active-color={{當前選中的指示點顏色}}

autoplay={{是否自動切換}}

current={{當前所在滑塊的 index}}

current-item-id={{當前所在滑塊的 item-id ，不能與 current 被同時指定}}

interval={{自動切換時間間隔}}

duration={{滑動動畫時長}}

circular={{是否採用銜接滑動}}

vertical={{滑動方向是否為縱向}}

previous-margin={{前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值}}

next-margin={{後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值}}

display-multiple-items={{同時顯示的滑塊數量}}

skip-hidden-item-layout={{是否跳過未顯示的滑塊佈局，設為 true 可優化複雜情況下的滑動效能，但會丟失隱藏狀態滑塊的佈局資訊}}

bindchange={{current 改變時會觸發 change 事件，event.detail = {current: current, source: source}}}

bindanimationfinish={{動畫結束時會觸發 animationfinish 事件，event.detail = {current: current, source: source}}}>

</swiper>

/**.js**/

page({

data:{//預設值

indicatordots:false，

indicatorcolor:rgba(0,0,0,.3),

indicatoractivecolor:#000000,

autoplay:false,

current:0,

currentitemid:"",

interval:5000,

duration:500,

circular:false,

vertical:false,

previousmargin:0px,

nextmargin:0px,

displaymultipleitems:1,

skiphiddenitemlayout:false

}

})

下面舉一個小例子，只用了上面的部分屬性。

<!--index.wxml--> < swiper indicator-dots= "{{indicatorDots}}" autoplay= "{{autoplay}}" circular= "{{circular}}" interval= "{{interval}}" duration= "{{duration}}"> < block wx:for= "{{imgUrls}}"> < swiper-item > < image src= "{{item}}" / > </ swiper-item > </ block > </ swiper >

//index.js Page({ data: { imgUrls: [ '../images/tu1.jpg', '../images/tu2.jpg', '../images/tu3.jpg' ], indicatorDots: false, autoplay: true, circular: true, interval: 5000, duration: 1000 }

}）

效果圖如下：

這是一個自動切換和銜接滑動的圖片輪播，按照讀者自己的需求，可以加上上述的其他屬性。