当前位置:网站首页>Transfer data to event object in wechat applet
Transfer data to event object in wechat applet
2022-07-06 18:01:00 【richest_ qi】
List of articles
Antecedents feed
to event Object delivery id
- to event Object delivery id(
id="btn"
):<button id="btn" bindtap="handleTap"> Click on me </button>
- from event Get in object id(
e.target.id
):handleTap(e){ console.log(e.target.id); }
to event Object passing custom attributes
- to event Object passing custom attributes (
data-type="confirm_btn"
):<button data-type="confirm_btn" bindtap="handleTap"> Click on me </button>
- from event Get custom attributes from object (
e.target.dataset.type
):handleTap(e){ console.log(e.target.dataset.type); }
Applet project
towards event Object delivery id
The main files involved in the code are :
- app.json
- pages/index/index.wxss
- pages/index/index.wxml
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": " Login Center ",
"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"> Sign in </view>
<view class="list">
<view class="item">
<input type="text" id="username" bindinput="handleInput" placeholder=" user name " />
</view>
<view class="item">
<input type="text" password id="password" bindinput="handleInput" placeholder=" password " />
</view>
</view>
<button size="mini"> Sign in </button>
</view>
pages/index/index.js
Page({
data:{
username:"",
password:""
},
handleInput(e){
const type = e.target.id;
this.setData({
[type]:e.detail.value
})
}
})
towards event Object passing custom attributes
The files involved in the code change are :
- pages/index/index.wxml
- pages/index/index.js
pages/index/index.wxml
<view class="container">
<view class="title"> Sign in </view>
<view class="list">
<view class="item">
<input type="text" data-type="username" bindinput="handleInput" placeholder=" user name " />
</view>
<view class="item">
<input type="text" password data-type="password" bindinput="handleInput" placeholder=" password " />
</view>
</view>
<button size="mini"> Sign in </button>
</view>
pages/index/index.js
Page({
data:{
username:"",
password:""
},
handleInput(e){
const type = e.target.dataset.type;
this.setData({
[type]:e.detail.value
})
}
})
Related links
Achieve animation effect through event binding
Event binding of wechat applet
边栏推荐
- I want to say more about this communication failure
- Codeforces Round #803 (Div. 2)
- FMT开源自驾仪 | FMT中间件:一种高实时的分布式日志模块Mlog
- 李書福為何要親自掛帥造手機?
- [introduction to MySQL] the first sentence · first time in the "database" Mainland
- Today in history: the mother of Google was born; Two Turing Award pioneers born on the same day
- Kill -9 system call used by PID to kill process
- Guidelines for preparing for the 2022 soft exam information security engineer exam
- Unity小技巧 - 绘制瞄准准心
- 酷雷曼多种AI数字人形象,打造科技感VR虚拟展厅
猜你喜欢
中移动、蚂蚁、顺丰、兴盛优选技术专家,带你了解架构稳定性保障
declval(指导函数返回值范例)
The easycvr platform reports an error "ID cannot be empty" through the interface editing channel. What is the reason?
F200——搭载基于模型设计的国产开源飞控系统无人机
开源与安全的“冰与火之歌”
EasyCVR接入设备开启音频后,视频无法正常播放是什么原因?
node の SQLite
2022年大厂Android面试题汇总(一)(含答案)
C语言指针*p++、*(p++)、*++p、*(++p)、(*p)++、++(*p)对比实例
Manifest of SAP ui5 framework json
随机推荐
Debug and run the first xv6 program
FlutterWeb瀏覽器刷新後無法回退的解决方案
Pytest learning ----- pytest operation mode and pre post packaging of interface automation testing
Pytest learning ----- pytest confitest of interface automation test Py file details
SAP UI5 框架的 manifest.json
The latest financial report release + tmall 618 double top, Nike energy leads the next 50 years
Jerry's watch deletes the existing dial file [chapter]
Codeforces Round #803 (Div. 2)
Solution qui ne peut pas être retournée après la mise à jour du navigateur Web flutter
Kernel link script parsing
Getting started with pytest ----- test case rules
The easycvr platform reports an error "ID cannot be empty" through the interface editing channel. What is the reason?
Distinguish between basic disk and dynamic disk RAID disk redundant array
High precision operation
C语言指针*p++、*(p++)、*++p、*(++p)、(*p)++、++(*p)对比实例
二分(整数二分、实数二分)
OpenEuler 会长久吗
declval(指导函数返回值范例)
OpenCV中如何使用滚动条动态调整参数
STM32 key state machine 2 - state simplification and long press function addition