溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序事件與冒泡的實(shí)例解析

發(fā)布時(shí)間：2020-07-18 15:21:01 來源：億速云 閱讀：212 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了微信小程序事件與冒泡的實(shí)例解析，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

先來熟悉一個(gè)swiper組件，可以實(shí)現(xià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>

微信小程序事件與冒泡的實(shí)例解析
indicator-dots=“true” 這個(gè)是顯示面板的指示點(diǎn)

indicator-color="rgba(0, 0, 0, .3)"這個(gè)是設(shè)置小圓點(diǎn)的顏色

vertical='true'縱向滾動

autoplay=“true” 自動滾動，輪播圖輪播圖這個(gè)肯定是要有的，不可能要用戶手動自己播吧

interval=“2000” 這個(gè)是設(shè)置間隔的滾動時(shí)間，單位是ms，也就是兩秒

事件

<text class='moto' bindtap="onTap">開啟小程序之旅</text>
Page({
 onTap:function(){
  // //頁面跳轉(zhuǎn)，可返回
  // wx.navigateTo({
  //  url:'../post/post'
  // })

  wx.redirectTo({
   url: '../post/post',
   success:function(res){
    console.log(res);
   }
  })
 },
})

當(dāng)鼠標(biāo)點(diǎn)擊開啟小程序之旅的時(shí)候，會觸發(fā)onTap綁定的函數(shù)
wx.navigateTo和wx.redirectTo這兩個(gè)都可以進(jìn)行頁面跳轉(zhuǎn)，他們的區(qū)別在于，wx.navigateTo這個(gè)用于平級頁面跳轉(zhuǎn)，也就是它跳轉(zhuǎn)頁面的時(shí)候前面的頁面并沒有關(guān)閉，而是隱藏起來了，來來來，往下看

微信小程序事件與冒泡的實(shí)例解析
看看上面多了一個(gè)返回的標(biāo)志
wx.redirectTo這個(gè)方法，它會把前一個(gè)頁面?zhèn)€關(guān)閉掉

微信小程序事件與冒泡的實(shí)例解析
再來看看其他的方法

 wx.navigateTo({
   url: '../post/post',
   success:function(res){
    console.log('跳轉(zhuǎn)成功執(zhí)行')
   },
   fail:function(){
    console.log("跳轉(zhuǎn)失敗執(zhí)行")
   },
   complete:function(){
    console.log('無論成功失敗都執(zhí)行')
   }
  })

這兩個(gè)跳轉(zhuǎn)相對應(yīng)的方法，來看一下

一個(gè)是onUnload，另一個(gè)是onHide

 //頁面隱藏的時(shí)候調(diào)用
 onHide:function () {
  console.log('haha')
 },
 //頁面被關(guān)閉時(shí)
 onUnload:function(){
  console.log('hahah')
 },

冒泡事件

也就是當(dāng)觸發(fā)子節(jié)點(diǎn)的時(shí)候，父節(jié)點(diǎn)也會受到影響。

我們來你看一個(gè)例子

	<view class='moto-container' bindtap='onContainerTap'>
			<text class='moto' bindtap="onSubTap">開啟小程序之旅</text>
	</view>
 onContainerTap:function(){
  console.log('onContainerTap')
 },
 onSubTap:function(){
  console.log('sub')
 }

愁一愁控制臺啥樣
微信小程序事件與冒泡的實(shí)例解析
父節(jié)點(diǎn)受到影響
怎么解決？來看。

	<view class='moto-container' bindtap='onContainerTap'>
			<text class='moto' catchtap="onTap">開啟小程序之旅</text>
	</view>

把bindtap改成catchtap就好，父節(jié)點(diǎn)不會受到影響。

獲取Page數(shù)據(jù)

page({
data:{name:"test"},
	showData:function(){
		var text=this.data.name
		console.log(text);
	}
})

看完上述內(nèi)容，是不是對微信小程序事件與冒泡的實(shí)例解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手