当前位置:网站首页>微信小程序中给event对象传递数据
微信小程序中给event对象传递数据
2022-07-06 09:53:00 【richest_qi】
文章目录
前情提要
给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
代码涉及的主要文件有:
- app.json
- pages/index/index.wxss
- pages/index/index.wxml
- 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对象传递自定义属性
代码变更涉及到文件有:
- pages/index/index.wxml
- 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
})
}
})
相关链接
边栏推荐
- Cool Lehman has a variety of AI digital human images to create a vr virtual exhibition hall with a sense of technology
- Solr appears write Lock, solrexception: could not get leader props in the log
- Establishment of graphical monitoring grafana
- [introduction to MySQL] the first sentence · first time in the "database" Mainland
- 【Elastic】Elastic缺少xpack无法创建模板 unknown setting index.lifecycle.name index.lifecycle.rollover_alias
- adb常用命令
- The solution that flutterweb browser cannot be rolled back after refreshing
- sql语句优化,order by desc速度优化
- Example of batch update statement combining update and inner join in SQL Server
- Easy introduction to SQL (1): addition, deletion, modification and simple query
猜你喜欢
Appium automated test scroll and drag_ and_ Drop slides according to element position
Flink parsing (VII): time window
Flink analysis (I): basic concept analysis
[elastic] elastic lacks xpack and cannot create template unknown setting index lifecycle. name index. lifecycle. rollover_ alias
node の SQLite
SQL statement optimization, order by desc speed optimization
FlutterWeb浏览器刷新后无法回退的解决方案
OpenCV中如何使用滚动条动态调整参数
Cool Lehman has a variety of AI digital human images to create a vr virtual exhibition hall with a sense of technology
Grafana 9 正式发布,更易用,更酷炫了!
随机推荐
在一台服务器上部署多个EasyCVR出现报错“Press any to exit”,如何解决?
SAP UI5 框架的 manifest.json
TCP connection is more than communicating with TCP protocol
Remote code execution penetration test - B module test
Run xv6 system
Flink parsing (VII): time window
Mysqlimport imports data files into the database
Optimization of middle alignment of loading style of device player in easycvr electronic map
How to use scroll bars to dynamically adjust parameters in opencv
Error: Publish of Process project to Orchestrator failed. The operation has timed out.
MySQL stored procedure
Example of batch update statement combining update and inner join in SQL Server
Alibaba brand data bank: introduction to the most complete data bank
The art of Engineering (3): do not rely on each other between functions of code robustness
面试突击63:MySQL 中如何去重?
OliveTin能在网页上安全运行shell命令(上)
2022年大厂Android面试题汇总(二)(含答案)
Selected technical experts from China Mobile, ant, SF, and Xingsheng will show you the guarantee of architecture stability
Binary search strategy
In terms of byte measurement with an annual salary of 30W, automated testing can be learned in this way