微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡實(shí)例分析
本文實(shí)例講述了微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡。分享給大家供大家參考，具體如下：
先來(lái)熟悉一個(gè)swiper組件，可以實(shí)現(xiàn)我們常見(jiàn)的輪播圖效果。
<view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 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” 這個(gè)是顯示面板的指示點(diǎn)
indicator-color="rgba(0, 0, 0, .3)"這個(gè)是設(shè)置小圓點(diǎn)的顏色
vertical='true'縱向滾動(dòng)
autoplay=“true” 自動(dòng)滾動(dòng)，輪播圖輪播圖這個(gè)肯定是要有的，不可能要用戶手動(dòng)自己播吧
interval=“2000” 這個(gè)是設(shè)置間隔的滾動(dòng)時(shí)間，單位是ms，也就是兩秒
事件
<text class='moto' bindtap="onTap">開(kāi)啟小程序之旅</text>
Page({
onTap:function(){
// //頁(yè)面跳轉(zhuǎn)，可返回
// wx.navigateTo({
// url:'../post/post'
// })
wx.redirectTo({
url: '../post/post',
success:function(res){
console.log(res);
}
})
},
})
當(dāng)鼠標(biāo)點(diǎn)擊開(kāi)啟小程序之旅的時(shí)候，會(huì)觸發(fā)onTap綁定的函數(shù)
wx.navigateTo和wx.redirectTo這兩個(gè)都可以進(jìn)行頁(yè)面跳轉(zhuǎn)，他們的區(qū)別在于，wx.navigateTo這個(gè)用于平級(jí)頁(yè)面跳轉(zhuǎn)，也就是它跳轉(zhuǎn)頁(yè)面的時(shí)候前面的頁(yè)面并沒(méi)有關(guān)閉，而是隱藏起來(lái)了，來(lái)來(lái)來(lái)，往下看
看看上面多了一個(gè)返回的標(biāo)志
wx.redirectTo這個(gè)方法，它會(huì)把前一個(gè)頁(yè)面?zhèn)€關(guān)閉掉
再來(lái)看看其他的方法
wx.navigateTo({
url: '../post/post',
success:function(res){
console.log('跳轉(zhuǎn)成功執(zhí)行')
},
fail:function(){
console.log("跳轉(zhuǎn)失敗執(zhí)行")
},
complete:function(){
console.log('無(wú)論成功失敗都執(zhí)行')
}
})
這兩個(gè)跳轉(zhuǎn)相對(duì)應(yīng)的方法，來(lái)看一下
一個(gè)是onUnload，另一個(gè)是onHide
//頁(yè)面隱藏的時(shí)候調(diào)用
onHide:function () {
console.log('haha')
},
//頁(yè)面被關(guān)閉時(shí)
onUnload:function(){
console.log('hahah')
},
冒泡事件
也就是當(dāng)觸發(fā)子節(jié)點(diǎn)的時(shí)候，父節(jié)點(diǎn)也會(huì)受到影響。
我們來(lái)你看一個(gè)例子
<view class='moto-container' bindtap='onContainerTap'> <text class='moto' bindtap="onSubTap">開(kāi)啟小程序之旅</text> </view>
onContainerTap:function(){
console.log('onContainerTap')
},
onSubTap:function(){
console.log('sub')
}
愁一愁控制臺(tái)啥樣
父節(jié)點(diǎn)受到影響
怎么解決？來(lái)看。
<view class='moto-container' bindtap='onContainerTap'> <text class='moto' catchtap="onTap">開(kāi)啟小程序之旅</text> </view>
把bindtap改成catchtap就好，父節(jié)點(diǎn)不會(huì)受到影響。
獲取Page數(shù)據(jù)
page({
data:{name:"test"},
showData:function(){
var text=this.data.name
console.log(text);
}
})
希望本文所述對(duì)大家微信小程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法
這篇文章主要介紹了JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法,實(shí)例分析了javascript操作table表格元素的技巧,需要的朋友可以參考下2015-03-03
uniapp自定義下拉刷新組件項(xiàng)目實(shí)踐總結(jié)分析
在日常的開(kāi)發(fā)過(guò)程中,我們經(jīng)常遇到下拉刷新的場(chǎng)景,很方便的刷新游覽的內(nèi)容,在此實(shí)現(xiàn)了一個(gè)下拉刷新的自定義組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-09-09
Eclipse編輯jsp、js文件時(shí)卡死現(xiàn)象的解決辦法匯總
使用Eclipse編輯jsp、js文件時(shí)，經(jīng)常出現(xiàn)卡死現(xiàn)象，在網(wǎng)上百度了N次，經(jīng)過(guò)N次優(yōu)化調(diào)整后，卡死現(xiàn)象逐步好轉(zhuǎn),下面通過(guò)腳本之家平臺(tái)給大家分享幾種解決辦法，需要的朋友參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈幕飛機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript鼠標(biāo)禁止右鍵禁止打開(kāi)控制臺(tái)及鍵盤禁用
這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)禁止右鍵禁止打開(kāi)控制臺(tái)及鍵盤禁用的相關(guān)資料,實(shí)現(xiàn)禁止右鍵和禁止打開(kāi)控制臺(tái)是一種常見(jiàn)的網(wǎng)頁(yè)保護(hù)技巧,可以防止非法復(fù)制、盜取網(wǎng)頁(yè)資源等安全問(wèn)題,需要的朋友可以參考下2023-10-10
本文主要介紹了JavaScript的數(shù)組操作，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript實(shí)現(xiàn)異步提交表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)異步提交表單數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JS彈出層的絕對(duì)定位居中是如何實(shí)現(xiàn)的,需要的朋友可以參考下2014-02-02
繁簡(jiǎn)字轉(zhuǎn)換功能...2006-07-07
javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法
這篇文章主要介紹了javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法,涉及javascript針對(duì)鍵盤按鍵的判斷及checkbox的操作技巧,需要的朋友可以參考下2015-05-05