微信小程式學習總結(四)事件與冒泡例項分析
阿新 • • 發佈:2020-06-05
本文例項講述了微信小程式學習總結(四)事件與冒泡。分享給大家供大家參考,具體如下:
先來熟悉一個swiper元件,可以實現我們常見的輪播圖效果。
<view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0,.3)" autoplay="true" interval="2000"> <swiper-item><image src='/imgs/3.jpg'></image></swiper-item> <swiper-item><image src='/imgs/4.jpg'></image></swiper-item> <swiper-item><image src='/imgs/5.jpg'></image></swiper-item> </swiper>
indicator-dots=“true” 這個是顯示面板的指示點
indicator-color="rgba(0,.3)"這個是設定小圓點的顏色
vertical='true'縱向滾動
autoplay=“true” 自動滾動,輪播圖輪播圖這個肯定是要有的,不可能要使用者手動自己播吧
interval=“2000” 這個是設定間隔的滾動時間,單位是ms,也就是兩秒
事件
<text class='moto' bindtap="onTap">開啟小程式之旅</text>
Page({ onTap:function(){ // //頁面跳轉,可返回 // wx.navigateTo({ // url:'../post/post' // }) wx.redirectTo({ url: '../post/post',success:function(res){ console.log(res); } }) },})
當滑鼠點選開啟小程式之旅的時候,會觸發onTap繫結的函式
wx.navigateTo和wx.redirectTo這兩個都可以進行頁面跳轉,他們的區別在於,wx.navigateTo這個用於平級頁面跳轉,也就是它跳轉頁面的時候前面的頁面並沒有關閉,而是隱藏起來了,來來來,往下看
看看上面多了一個返回的標誌
wx.redirectTo這個方法,它會把前一個頁面個關閉掉
再來看看其他的方法
wx.navigateTo({ url: '../post/post',success:function(res){ console.log('跳轉成功執行') },fail:function(){ console.log("跳轉失敗執行") },complete:function(){ console.log('無論成功失敗都執行') } })
這兩個跳轉相對應的方法,來看一下
一個是onUnload,另一個是onHide
//頁面隱藏的時候呼叫 onHide:function () { console.log('haha') },//頁面被關閉時 onUnload:function(){ console.log('hahah') },
冒泡事件
也就是當觸發子節點的時候,父節點也會受到影響。
我們來你看一個例子
<view class='moto-container' bindtap='onContainerTap'> <text class='moto' bindtap="onSubTap">開啟小程式之旅</text> </view>
onContainerTap:function(){ console.log('onContainerTap') },onSubTap:function(){ console.log('sub') }
愁一愁控制檯啥樣
父節點受到影響
怎麼解決?來看。
<view class='moto-container' bindtap='onContainerTap'> <text class='moto' catchtap="onTap">開啟小程式之旅</text> </view>
把bindtap改成catchtap就好,父節點不會受到影響。
獲取Page資料
page({ data:{name:"test"},showData:function(){ var text=this.data.name console.log(text); } })
希望本文所述對大家微信小程式設計有所幫助。