微信小程序基础 | 小程序事件的绑定 | 08

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序基础 | 小程序事件的绑定 | 08，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1081字，纯文字阅读大概需要2分钟。

内容图文

目录

• 事件绑定语法如下
• 特别注意
• 案例: 加一减一

小程序中绑定事件,通过bind关键字来实现.
如bindtap,bindinput,bindchange等...
不同的组件支持不同的事件,具体看组件的说明即可.

事件绑定语法如下

<input bindinput="handleInput">




handleInput:function(e){
    console.log(e);
    console.log("值被改变了");
}

特别注意

绑定事件时不能带带参数
事件传递参数要通过标签自定义属性来传递

错误:
<input bindinput="handleInput(100)"/> 

正确: 
<input bindinput="handleInput" data-item="100"/> 

案例: 加一减一

新建一个页面文件demo02,并将其置顶显示.
编辑app.json如下

{
  "pages": [
    "pages/demo02/demo02",
    ...

编辑demo02/demo02.js代码如下

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  handleInput:function(e){
    // console.log(e);
    this.setData({
      num: Number(e.detail.value)
    })
  },
  handleTap:function(e){
    // console.log(e)
    const oper = e.target.dataset.oper // 获取传递的属性值
    this.setData({
      num: this.data.num + oper
    })
  },
...

编辑demo02/demo02.wxml代码如下

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

显示效果如下

内容总结

以上是互联网集市为您收集整理的微信小程序基础 | 小程序事件的绑定 | 08全部内容，希望文章能够帮你解决微信小程序基础 | 小程序事件的绑定 | 08所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---