微信小程序滑塊視圖容器swiper類似于安卓的ViewPager,但是微信小程序的swiper相比于安卓的ViewPager要容易實現一點,下面將為大家介紹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} |
數據可以通過抽到js文件中的data進行數據綁定,對bindchange進行監聽,在js中進行業務處理。
以下是效果圖:
以下是wxml代碼:
<!--是否顯示圓點,自動播放, 間隔時間, 監聽滾動和點擊事件-->
<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<!--swiper-item只能包含一個節點再多會自動刪除-->
<swiper-item>
<view style="background: red; height: 150px"></view>
</swiper-item>
<swiper-item>
<view style="background: green; height: 150px"></view>
</swiper-item>
<swiper-item>
<view style="background: blue; height: 150px"></view>
</swiper-item>
</swiper>
以下是js代碼:
Page({ data:{ // text:"這是一個頁面" },
/**
* 這里處理滾動事件處理
*/ listenSwiper:function(e) {
//打印信息
console.log(e)
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
} })