swiper滑動面板(又稱滑塊視圖容器,常見的輪播圖)
屬性名 |
類型 |
默認值 |
說明 |
indicator-dots |
Boolean |
false |
是否顯示面板指示點 |
autoplay |
Boolean |
false |
是否自動切換 |
current |
Number |
0 |
當前所在頁面的index |
interval |
Number |
5000 |
自動切換時間間隔 |
duration |
Number |
1000 |
滑動動畫時長 |
bindchange |
EventHandle |
|
current改變時會觸發change事件,event.detail={current:current} |
注意:其中只可放置swiper-item組件,其他節點會被自動刪除
僅可放置在swiper組件中,寬高自動設置爲100%
在.wxml文件中設置swiper
設置indicator-dots="true"顯示面板指示點,當前頁面爲第4頁,每次頁面切換的時間爲5000ms,滑動時長1000ms,綁定頁面改變觸發事件bindChange。頁面顯示的圖片在imgArray數組中,通過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中設置圖片的寬度
.img{
width:100%;
}
在.js中設置保存圖片的數組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']
},
並執行changeCurren方法
changeCurrent:function(){
console.log("我滾動了");
}
運行結果:
頁面此時已經發生滾動,顯示第一張圖片,底部第一個小圓點顏色變亮。當頁面滾動的時候控制檯回打印出:我滾動了