微信小程序中给event对象传递数据

前情提要

给event对象传递id

• 给event对象传递id（id="btn"）：<button id="btn" bindtap="handleTap">点我一下</button>
• 从event对象中获取id（e.target.id）： handleTap(e){ console.log(e.target.id); }

给event对象传递自定义属性

• 给event对象传递自定义属性（data-type="confirm_btn"）：<button data-type="confirm_btn" bindtap="handleTap">点我一下</button>
• 从event对象中获取自定义属性（e.target.dataset.type）： handleTap(e){ console.log(e.target.dataset.type); }

小程序项目

向event对象传递id

代码涉及的主要文件有：

1. app.json
2. pages/index/index.wxss
3. pages/index/index.wxml
4. pages/index/index.js

app.json

{
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "登录中心",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxss

.container{
    
  padding: 20rpx;
}
.container .title{
    
  padding: 20rpx 0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 32rpx;
}
.list{
    
  margin: 40rpx auto 20rpx;
}
.item{
    
  margin: 12rpx 0;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
}
.item input{
    
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}
button{
    
  font-weight: normal;
  font-size: 28rpx!important;
  color: #fff;
  background: #0149af;
}

pages/index/index.wxml

<view class="container">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" id="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password id="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini">登录</button>
</view>

pages/index/index.js

Page({
    
  data:{
    
    username:"",
    password:""
  },
  handleInput(e){
    
    const type = e.target.id;
    this.setData({
    
      [type]:e.detail.value
    })
  }
})

向event对象传递自定义属性

代码变更涉及到文件有：

1. pages/index/index.wxml
2. pages/index/index.js

pages/index/index.wxml

<view class="container">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini">登录</button>
</view>

pages/index/index.js

Page({
    
  data:{
    
    username:"",
    password:""
  },
  handleInput(e){
    
    const type = e.target.dataset.type;
    this.setData({
    
      [type]:e.detail.value
    })
  }
})

相关链接

通过事件绑定实现动画效果
微信小程序的事件绑定