亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡實(shí)例分析

 更新時(shí)間：2020年06月04日 11:29:34   作者：huangyuxin_  
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)（四）事件與冒泡,結(jié)合實(shí)例形式分析了微信小程序事件、冒泡、數(shù)據(jù)獲取相關(guān)機(jī)制、原理與操作注意事項(xiàng),需要的朋友可以參考下

本文實(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>

這里寫(xiě)圖片描述
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)，往下看

這里寫(xiě)圖片描述
看看上面多了一個(gè)返回的標(biāo)志
wx.redirectTo這個(gè)方法，它會(huì)把前一個(gè)頁(yè)面?zhèn)€關(guān)閉掉

這里寫(xiě)圖片描述
再來(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)啥樣
這里寫(xiě)圖片描述
父節(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)文章

最新評(píng)論