首页 > 微信 > 详细

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

时间:2021-01-17 19:25:43      阅读:25      评论:0      收藏:0      [点我收藏+]


小程序中绑定事件,通过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

原文:https://www.cnblogs.com/Rowry/p/14288561.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!