小程序中的事件处理

事件处理

一个应用仅仅只有界面展示是不够的，还需要和用户做交互，例如：响应用户的点击、获取用户输入的值等等，在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作

1. 事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种：

第一种方式：bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名

<button bind:tap="handler">按钮</button>

第二种方式：bind事件名，bind 后面直接跟上事件名

<button bindtap="handler">按钮</button>

事件处理函数需要写到 .js 文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。例如：

// pages/home/home.js
Page({
   
  // 页面的初始数据
  data: {
   },

  // 事件处理程序
  handler () {
   
    console.log('我被执行啦~~~')
  }
    
  // 其他 coding...
})

当组件触发事件时，绑定的事件的处理函数会收到一个事件对象，用来记录事件发生时的相关信息。在触发事件时，事件处理程序会主动的给我们传入一个参数 —— event（事件对象）

// pages/home/home.js
Page({
   
  // 页面的初始数据
  data: {
   },

  // 事件处理程序
  handler (event) {
   
    // console.log('我被触发了~~~')
    console.log(event)
  }
    
  // 其他 coding...
})

2. 小程序中的事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html 事件系统

事件绑定

bind事件名 tap移动端事件

bindtap=“事件名字”

catchtap=“阻止事件冒泡”

事件需要在js文件中进行定义即可

事件传递参数

在标签上绑定一个属性data-index=“xxxx”

方法中event.target.dataset获取对象数据内容

<button size="mini" type="primary" data-type="jian" bindtap="changeNum">-</button>
{
  {num}}
<button size="mini" type="primary" data-type="jia"  bindtap="changeNum">+</button>

Page({
   
    changeNum(e){
   
        console.log(e);
        let {
   type} = e.target.dataset;
        type=='jia'?this.data.num++:this.data.num--;
        this.setData({
   
          num: this.data.num,
        })
      },
})

条件渲染

wx:if v-if block

 <view wx:if="{
    {flag}}">Hello wx:if条件渲染的使用</view>
 <view hidden="{
    {!flag}}">Hello hidden条件渲染的使用</view>

 <button bindtap="toggle">toggle</button>

Page({
   
    data:{
   
      flag:true,  
    },
    toggle(){
   
        console.log(this.data.flag);
        let flag = this.data.flag;
        //修改数据的内容,data中绑定的数据，
        this.setData({
   
          flag:!flag,
        })
  },
})

hidden

hidden和 wx:if的区别

1. 被wx:if控制的区域，