wx小程序-button的bindtap事件

可乐不加冰呀2024-04-21 6:05

一、button标签

由于小程序语法中，处理函数不能带参数，所以不能实现直接调用要修改的数据。所以除了用bindtap（提示：bindtap和bind:tap两种语法都是正确的）绑定处理函数，还需要在button属性中添加一个data-(待修改的数据)，这里我们直接命名成data-info。在index.wxml。

<button type="primary" bind:tap="btnTap2" data-info="{{22}}">增加</button>

这里data-info的值给了22，一定要用这种类似差值表达式的{{}}形式，否则直接在双引号里面写22，就是字符串，而不是数字。

二、通过处理函数改变数据

在index.js文件夹下data里面放一个数据count，初值设为0。在函数setData里面通过this.data.count获取count，通过e.target.dataset.info获取data-info的值。

Page({
  // 页面初始数据
  data: {
    count:0
    },
    //定义按钮事件处理函数
    btnTap2(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    }
})

这样的效果就是每次点击按钮，count就会加上data-info的值也就是22。