发表于： 2019-11-03 21:24:38
1 1123
今天完成的事：
完成了滚动选择器
明天计划的事：
继续任务11
遇到的问题：
暂无
收获：
微信小程序的事件
小程序中不使用click事件，而用tab（触摸）事件代替，事件的前缀有两种分别是bind和catch，bind:tab表示冒泡事件，即事件触发后继续冒泡触发后续事件，catch:tab表示非冒泡事件，即事件触发后不再冒泡，类似执行了event.stopPropagation()方法。
//实现一个点击加一的计数器
//wxml
<view>
<text bind:tab="addNumber">{{count}}</text>
</view>
//js
Component({
//调用组件传来的变量
properties:{
},
//内部变量
data() { return { count:0 } },
//内部方法
methods:{
//点击加一
addNumber() { this.setData({ count:count+1 }); } } });
改变data中的属性值必须使用this.setData()方法，传入一个对象，对象中存放需要改变的属性键值对。
bind:tab可以简写为bindtb，也可以写成bind:tab，看起来更清晰
1 应用生命周期回调函数
在app.js中调用的App函数中，可以设置应用声明周期的回调函数
App({
onLaunch (options) {
//初始化完成后执行
},
onShow (options) {
//进入小程序后执行
},
onHide () {
//离开小程序后执行，注意不是销毁，如切换其他App时，微信处于后台中，这时调用onHide
},
onError (msg) {
//小程序出错时执行
}
});
.2 页面的生命周期回调函数
Page({
onLoad: function(options) {
//页面初始化后执行
},
onReady: function() {
//初次渲染结束执行
},
onShow: function() {
//进入页面执行
},
onHide: function() {
//页面隐藏/切入后台时触发，如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
},
onUnload: function() {
//页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
},
onPullDownRefresh: function() {
// Do something when pull down.监听下拉刷新事件,必须开启enablePullDownRefresh
},
onReachBottom: function() {
// Do something when page reach bottom. 监听用户上拉触底事件
},
onShareAppMessage: function () {
// return custom share data when user share.点击转发按钮
},
onPageScroll: function() {
// Do something when page scroll 页面滚动事件
},
onResize: function() {
// Do something when page resize旋转屏幕触发
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
3 组件生命周期回调函数
Component({
lifetimes: {
created:function() {
//组件实例化的时候执行，此时不能调用setData()
}
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
});
返回列表
评论