微信小程序（十）swiper組件詳細(xì)介紹
Android寫過輪播圖的痛楚只有寫過的知道，相對(duì)還是比較麻煩的，并沒有一個(gè)輪播圖組件，有個(gè)ViewPage也需要自己定制，IOS則多用UIScrollerView去實(shí)現(xiàn)，這個(gè)swiper封裝的相對(duì)還是方便的，使用方式也相對(duì)那倆容易些。
主要屬性：
屬性只需要設(shè)置就行了 也可以抽到j(luò)s文件的data中進(jìn)行數(shù)據(jù)綁定，監(jiān)聽使用bindchange，在js中做業(yè)務(wù)處理。
wxml
<!--是否顯示圓點(diǎn)，自動(dòng)播放， 間隔時(shí)間， 監(jiān)聽滾動(dòng)和點(diǎn)擊事件--> <swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" > <!--swiper-item只能包含一個(gè)節(jié)點(diǎn)再多會(huì)自動(dòng)刪除--> <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:"這是一個(gè)頁(yè)面"
},
/**
* 這里處理滾動(dòng)事件處理
*/
listenSwiper:function(e) {
//打印信息
console.log(e)
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
}
})
相關(guān)文章：
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導(dǎo)航 progress組件 action-sheet
應(yīng)用生命周期 button組件 modal組件
頁(yè)面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關(guān)文章
微信小程序與php 實(shí)現(xiàn)微信支付的簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序與php 實(shí)現(xiàn)微信支付的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了delete?語(yǔ)法的本質(zhì)深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 教程之wxapp 視圖容器 view的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來看看創(chuàng)建的詳細(xì)過程2021-11-11
這篇文章主要介紹了微信小程序 生命周期詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 緩存（本地緩存、異步緩存、同步緩存）詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解的相關(guān)資料,希望通過本文大家能夠理解并應(yīng)用小程序頁(yè)面跳轉(zhuǎn)及事件綁定的實(shí)例，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序 事件的相關(guān)資料,并附實(shí)例代碼，需要的朋友可以參考下2016-10-10
本文將詳細(xì)介紹Vuex的API文檔,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了前端可視化搭建組件值校驗(yàn)規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05