微信小程序開發技術教程之swiper組件

微信小程序滑塊視圖容器swiper類似于安卓的ViewPager，但是微信小程序的swiper相比于安卓的ViewPager要容易實現一點，下面將為大家介紹swiper的一些使用方法。

主要屬性：

數據可以通過抽到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(){

 // 頁面關閉 

} })