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

桐廬網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),桐廬網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為桐廬上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的桐廬做網(wǎng)站的公司定做！

先來(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">開啟小程序之旅</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)擊開啟小程序之旅的時(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">開啟小程序之旅</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">開啟小程序之旅</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);
	}
})

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

分享名稱：微信小程序事件與冒泡的實(shí)例解析
標(biāo)題來(lái)源：http://aaarwkj.com/article30/pcsdso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷、外貿(mào)建站、標(biāo)簽優(yōu)化、ChatGPT、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)