微信小程序生命周期及(bindtap和catchtap)点击事件

小程序生命周期:

data:{} 页面的初始数据;

​ data的后面可以写wxml中绑定的事件,如showPopup() {};

​ onLoad:function(options){} 监听页面加载;

​ onShow:function(){} 监听页面显示;

​ onHide:function(){} 监听页面隐藏;

​ onUnload:function(){} 监听页面卸载;

(bindtap和catchtap)点击事件

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

<view id="outer" bindtap="handleTap1">  	
    outer view    
    <view id="middle" catchtap="handleTap2">    
        middle view    
        <view id="inner" bindtap="handleTap3">      
            inner view   
        </view>
    </view>
</view> 
Page({    
	handleTap1:function(event){  //点击输出outer view bindtap      	console.log("outer view bindtap")    },    
	handleTap2: function (event) {  //点击输出middle view      console.log("middle view catchtap")    },    
	handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap      console.log("inner view bindtap")    },
})

<view id="outer" bindtap="handleTap1">  	
    outer view    
    <view id="middle" bindtap="handleTap2">   
        middle view    
        <view id="inner" bindtap="handleTap3">      
            inner view   
        </view>
    </view>
</view> 
Page({    
	handleTap1:function(event){  
		//点击输出outer view bindtap      
		console.log("outer view bindtap")    
	},    
	handleTap2: function (event) {  
		//点击输出outer view bindtap middle view      
		console.log("middle view catchtap")    
	},    
	handleTap3: function (event) {  
		//点击输出outer view bindtap inner view bindtap  middle view catchtap         
		console.log("inner view bindtap")
	},
})
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值