wx小程序-button的bindtap事件

一、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。

相关推荐

  1. wx程序-buttonbindtap事件

    2024-04-21 05:48:04       43 阅读
  2. 微信程序bindtap和catchtap区别

    2024-04-21 05:48:04       65 阅读
  3. wx程序-input事件改变数据

    2024-04-21 05:48:04       38 阅读
  4. 微信程序使用bindtap事件data-xxx传值无法获取

    2024-04-21 05:48:04       29 阅读
  5. 程序API wx.startLocationUpdateBackground 使用

    2024-04-21 05:48:04       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-21 05:48:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-21 05:48:04       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-21 05:48:04       82 阅读
  4. Python语言-面向对象

    2024-04-21 05:48:04       91 阅读

热门阅读

  1. python实现假设检验-t检验

    2024-04-21 05:48:04       43 阅读
  2. ChatGPT写作术:提升写作水平

    2024-04-21 05:48:04       36 阅读
  3. js 事件模型 事件捕获、事件冒泡

    2024-04-21 05:48:04       35 阅读
  4. scss 和css 的区别 scss变量和css变量的区别

    2024-04-21 05:48:04       37 阅读
  5. 程序安装 - 笔记

    2024-04-21 05:48:04       37 阅读
  6. symbol 类型学习

    2024-04-21 05:48:04       38 阅读
  7. R-tree:一种高效的空间数据索引结构

    2024-04-21 05:48:04       34 阅读
  8. C++:move&forward

    2024-04-21 05:48:04       32 阅读
  9. 基于springboot的高校学科竞赛平台源码数据库

    2024-04-21 05:48:04       27 阅读
  10. MyBatis 面试题(七)

    2024-04-21 05:48:04       27 阅读