快捷導(dǎo)航

微信小程序（十）swiper組件詳細介紹

更新時間：2016年09月27日 11:51:42 作者：順子_RTFSC

這篇文章主要介紹了微信小程序swiper組件詳細介紹的相關(guān)資料,需要的朋友可以參考下

Android寫過輪播圖的痛楚只有寫過的知道，相對還是比較麻煩的，并沒有一個輪播圖組件，有個ViewPage也需要自己定制，IOS則多用UIScrollerView去實現(xiàn)，這個swiper封裝的相對還是方便的，使用方式也相對那倆容易些。

主要屬性：

屬性只需要設(shè)置就行了也可以抽到j(luò)s文件的data中進行數(shù)據(jù)綁定，監(jiān)聽使用bindchange，在js中做業(yè)務(wù)處理。

wxml

<!--是否顯示圓點，自動播放， 間隔時間， 監(jiān)聽滾動和點擊事件-->
<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<!--swiper-item只能包含一個節(jié)點再多會自動刪除-->
 <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為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 onReady:function(){
 // 頁面渲染完成
 },
 onShow:function(){
 // 頁面顯示
 },
 onHide:function(){
 // 頁面隱藏
 },
 onUnload:function(){
 // 頁面關(guān)閉
 }
})

相關(guān)文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導(dǎo)航               progress組件                         action-sheet
應(yīng)用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件