微信小程式——元件之swiper
大家看到許多網頁的首頁面都會有圖片的輪播,圖片輪播:既能通過圖片增加整個頁面的美觀程度,又能讓客戶一眼看出網頁想要表達的內容。那麼,今天我們就通過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 >})
效果圖如下:
這是一個自動切換和銜接滑動的圖片輪播,按照讀者自己的需求,可以加上上述的其他屬性。