《微信小程序开发实战》学习笔记Chapter05 事件绑定

chapter05 事件绑定

1. bindtap的语法格式

小程序中通过tap事件响应用户的触摸行为。

第一步，在wxml文件中，为组件绑定tap触摸事件。
<!-- pages/index6/index6.wxml -->
<button type="primary" bindtap="btntaphander">点我</button>
​
第二步，在js文件中，定义对应的事件处理函数，事件参数通过形参event（e）来接收。
 //定义按钮的事件处理函数
  btntaphander(e){
    console.log(e)
  },

2. 在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值。

第一步，在wxml文件中
<!-- pages/index6/index6.wxml -->
<button type="primary" bindtap="countchange">点我改数</button>
​
第二步，在js文件中
// pages/index6/index6.js
// +1按钮的点击事件处理函数
  countchange(){
    console.log('ok')
    this.setData({
      count:this.data.count+1
    })
  },

3. 事件传参

可以为组件提供data-自定义属性传参，其中代表的是参数的名字。

第一步，在wxml文件中
<button type="primary" bindtap="btntap2" data-info="{{2}}">点我传参</button>
​
第二步，在js文件中
  btntap2(e){
    this.setData({
      count:this.data.count+e.target.dataset.info
    })
    console.log(e)
  },

info 为参数的名字；

数值2会被解析为参数的值。

4. bindinput的语法格式

第一步，在wxml文件中
<input type="text" bindinput="inputhander"></input>
​
第二步，在js文件中
inputhander(e){
  console.log(e.detail.value)
},