WeChat小程序交流(QQ群:769977169)
效果图
代码示例
1、xxx.wxml
<view class='view'>{{clickMsg}}</view>
<view class='view0' id="view0" bindtap='clickMe'>bind 点击view0</view>
<view class='view1' id="view1" bindtap='clickMe'>bind 点击view1</view>
<view class='view1' id="view2" bindlongtap='longClick' data-title="longTap">bind 长按事件</view>
<view class='view1' id="view3" catchtap='catchClick' data-title="catchView">catch 点击</view>
<view class='view1' id="view4" bindtouchstart='startClick' bindtouchcancel='cancelClick' bindtouchmove='moveClick' bindtouchend='endClick'>bind start</view>
2、xxx.wxjs
var count = 0;
Page({
/**
* 页面的初始数据
*/
data: {
clickMsg: "显示点击的内容"
},
clickMe: function (even) {
console.log(even);
var id = even.currentTarget.id;
count++;
this.setData({
clickMsg: "显示点击内容" + id + "点击了" + count + "次",
});
},
longClick: function(even) {
console.log(even);
this.setData({
clickMsg: "长按事件",
});
},
catchClick: function(even) {
console.log(even);
this.setData({
clickMsg: "catch 点击事件",
});
},
startClick: function(even) {
this.setData({
clickMsg: "点击开始",
});
},
moveClick: function (even) {
this.setData({
clickMsg: "点击移动",
});
},
cancelClick: function (even) {
this.setData({
clickMsg: "点击退出",
});
},
endClick: function (even) {
this.setData({
clickMsg: "点击结束",
});
}
}
注意:
事件主要包括:点击、长按、点击开始、点击移动、点击结束等。
1、bind事件,父类组件对应的方法也会被调用
2、catch事件,父类组件对应的方法不会被调用