|
swiper?滑動(dòng)面板(又稱(chēng)滑塊視圖容器，常見(jiàn)的輪播圖)
|
屬性名
|
類(lèi)型
|
默認(rèn)值
|
說(shuō)明
|
|
indicator-dots
|
Boolean
|
false
|
是否顯示面板指示點(diǎn)
|
|
autoplay
|
Boolean
|
false
|
是否自動(dòng)切換
|
|
current
|
Number
|
0
|
當(dāng)前所在頁(yè)面的index
|
|
interval
|
Number
|
5000
|
自動(dòng)切換時(shí)間間隔
|
|
duration
|
Number
|
1000
|
滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
|
|
bindchange
|
EventHandle
|
|
current改變時(shí)會(huì)觸發(fā)change事件，event.detail={current:current}
|
注意：其中只可放置swiper-item組件，其他節(jié)點(diǎn)會(huì)被自動(dòng)刪除
current改變時(shí)會(huì)觸發(fā)change事件，event.detail={current:current}
注意：其中只可放置swiper-item組件，其他節(jié)點(diǎn)會(huì)被自動(dòng)刪除
swiper-item
僅可放置在swiper組件中，寬高自動(dòng)設(shè)置為100%
在.wxml文件中設(shè)置swiper
設(shè)置indicator-dots="true"顯示面板指示點(diǎn)，當(dāng)前頁(yè)面為第4頁(yè)，每次頁(yè)面切換的時(shí)間為5000ms，滑動(dòng)時(shí)長(zhǎng)1000ms，綁定頁(yè)面改變觸發(fā)事件bindChange。頁(yè)面顯示的圖片在imgArray數(shù)組中，通過(guò)wx：for綁定。
-
<swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">
-
-
<block wx:for="{{imgArray}}">
-
-
<swiper-item>
-
-
<image src="{{item}}" class="img"></image>
-
-
</swiper-item>
-
-
</block>
-
-
</swiper>
在.wxsss中設(shè)置圖片的寬度
-
.img{
-
-
width:100%;
-
-
}
在.js中設(shè)置保存圖片的數(shù)組imgArray
-
Page({
-
-
data:{
-
-
imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',
-
-
-
-
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',
-
-
-
-
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',
-
-
-
-
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']
-
-
},
-
-
并執(zhí)行changeCurren方法
-
-
changeCurrent:function(){
-
-
console.log("我滾動(dòng)了");
-
-
}
運(yùn)行結(jié)果：
頁(yè)面此時(shí)已經(jīng)發(fā)生滾動(dòng)，顯示第一張圖片，底部第一個(gè)小圓點(diǎn)顏色變亮。當(dāng)頁(yè)面滾動(dòng)的時(shí)候控制臺(tái)回打印出：我滾動(dòng)了
|
