小程序绑定事件通过bind关键字来实现,如:bindtap、bindinput、bindchange等
bindinput
bindinput事件,输入文本内容,就会出现相应的事件例如:
<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>
// pages/demo04/demo04.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
//输入框的input事件的执行逻辑
handleInput(e){
console.log(e);
}
})
注意事项,在小程序的赋值操作比较特殊,不可以直接使用:
this.data.num=e.detail.value或者是
this.num=e.detail=e.detail.value
(e.detail.value的值可以在控制台找到)
正确写法:
this.setData({
num:e.detail.value
})
所以代码为:
// pages/demo04/demo04.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
//输入框的input事件的执行逻辑
handleInput(e){
console.log(e.detail.value);
this.setData({
num:e.detail.value
})
}
})
在上面的input行输入时,下方的也会进行实时的修改。
bindtap:绑定点击事件
无法在小程序的事件中直接传递参数,需要通过自定义属性的方式来传递参数
<!--pages/demo04/demo04.wxml-->
<input type="text" bindinput="handleInput"></input>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
// pages/demo04/demo04.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0
},
//输入框的input事件的执行逻辑
handleInput(e){
console.log(e.detail.value);
this.setData({
num:e.detail.value
})
},
//加减按钮的事件:
handletap(e){
console.log(e);
const operation=e.currentTarget.dataset.operation;
this.setData({
num:this.data.num+operation
})
}
})
文章内容为视频零基础玩转微信小程序【黑马程序员】知识点整合