小程序 事件绑定

表白：人说红颜薄命，你做我的红颜，我愿为你薄命。
讲解对象：小程序 事件绑定
作者：融水公子 rsgz

我们假设一个需求，一个计算器。上面有输入框，输入什么下面显示什么。右边有加减号按钮，点击一次分别加减1.

函数原型：

app.json文件新加

"pages/demo01/demo01"

页面的js文件添加

  data: {
    num:0
  },
  handleInput(e){
    console.log("开心");
  },

wxml文件添加

<input type="text" bindinput="handleInput"/>
<view>
  {{num}}
</view>

输入数据：控制台会这样显示 开心执行了18次

第一次改进

  handleInput(e){
    console.log(e);
  },

当我输入100.事件源对象的value值也是改成了100

继续改进

  handleInput(e){
    console.log(e.detail.value);
  },

输入100，控制台会这样显示

继续改进：输入框的值赋值给输出框

  handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },

输出结果：输入输出框的值都是同步的

当然了在控制台的AppData里面也是有显示的

添加加减号按钮并且绑定事件 JS文件编辑

  data: {
    num:0
  },
  handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  handletap(e){
    const operation=e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num + operation
    })
  },

wxml文件编辑

<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

1 通过num:this.data.num获取值
2 通过

this.setData({

      num:this.data.num + operation

    })

进行设置值
3 绑定事件的时候不能直接传参，我们通过自定义一个属性传参

谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---