小程序swiper 滑塊視圖容器

屬性名	類型	默認值	說明	最低版本
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在滑塊的 index
current-item-id	String	""	當前所在滑塊的 item-id ，不能與 current 被同時指定	1.9.0
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
vertical	Boolean	false	滑動方向是否爲縱向
previous-margin	String	"0px"	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	String	"0px"	後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	Number	1	同時顯示的滑塊數量	1.9.0
skip-hidden-item-layout	Boolean	false	是否跳過未顯示的滑塊佈局，設爲 true 可優化複雜狀況下的滑動性能，但會丟失隱藏狀態滑塊的佈局信息	1.9.0
bindchange	EventHandle		current 改變時會觸發 change 事件，event.detail = {current: current, source: source}
bindanimationfinish	EventHandle		動畫結束時會觸發 animationfinish 事件，event.detail 同上	1.9.0

從 1.4.0 開始，change事件返回detail中包含一個source字段，表示致使變動的緣由，可能值以下：

• autoplay 自動播放致使swiper變化；
• touch 用戶划動引發swiper變化；
• 其餘緣由將用空字符串表示。

注意：其中只可放置<swiper-item/>組件，不然會致使未定義的行爲。

swiper-item

僅可放置在<swiper/>組件中，寬高自動設置爲100%。

屬性名	類型	默認值	說明	最低版本
item-id	String	""	該 swiper-item 的標識符	1.9.0

示例代碼：

pasting

<!-- autoplay:是否自動切換 current:當前所在滑塊的index circular:是否採用銜接滑動 indicator-dots:是否顯示面板指示點 -->

< swiper indicator-dots= "{{banner.length>0}}" autoplay= "true" current= "{{currentSwiper}}" circular= "true" class= "zwt_swiper">

< block wx:for= "{{banner}}" >

< swiper-item bindtap= "webfn" data-url= "{{item.link}}">

< image src= "{{item.pic}}" mode= "aspectFit" class= 'slide-image' / >

</ swiper-item >

</ block >

</ swiper >

 

let app = getApp();

Page({

data: {

currentSwiper: 0,

banner: [{

"pic": "http://src.leju.com/imp/imp/deal/d9/d4/e/80fa4f5075848ec36393afc0fdd_p46_mk48.jpeg",

"link": "https://m.leju.com/news-bj-6450614724957876758.html"

},

{

"pic": "http://src.leju.com/imp/imp/deal/26/4b/1/5a319403d781e609820990a7237_p46_mk48.jpeg",

"link": "https://m.leju.com/news-bj-6448801379690787539.html"

},

{

"pic": "http://src.leju.com/imp/imp/deal/8e/51/2/d7b2358a9a424edbb3c1acbad6a_p46_mk48.jpeg",

"link": "https://m.leju.com/news-bj-6448446556718019431.html"

}

]

},

// H5跳轉

webfn: function (e) {

var url = e.currentTarget.dataset.url;

if (url) {

wx.navigateTo({

url: '/pages/webhtml/webhtml?url=' + encodeURIComponent(url),

})

}

}

})