微信小程序如何在 wx：for 中判断页面跳转
661
2023-11-12
微信小程序实现事件传参与数据同步流程详解
−目录在事件处理函数中为data中的数据赋值事件传参bindinput的语法格式实现文本框和data之间的数据同步
在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：
hacker.wxml
?
1
<button type="primary" bindtap="CountChange">+1 按钮</button>
hacker.js
事件传参
小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数，例如，下面的代码不能正常运行：
?
1
<button type="primary" bindtap=btnHandler(123456)>事件传参</button>
因为小程序会把bindtap的属性值统一当做事件名称来处理，相当于调用一个名称为btnHandler(123456)的事件处理函数。
可以为组件提供data-自定义属性传参，其中代表的是参数的名字，示例如下：
info：参数名字
2：参数值
?
1
<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">事件传参</button>
在事件处理函数中，通过event.target.dataset.参数名即可获取具体的参数值，示例代码如下：
?
1
2
3
4
5
6
btnHandler(event){
// dataset是一个对象，包含所有通过data-*传来的参数项
console.log(event.target.dataset)
// 通过dataset可以访问具体的参数值
console.log(event.target.dataset.info)
},
代码如下：
hacker.js
?
1
2
3
4
5
6
7
8
9
10
Page({
data:{
count:0
},
btnHandler(e){
this.setData({
count:this.data.count + e.target.dataset.info
})
},
})
hacker.wxml
?
1
<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">+2按钮</button>
运行结果如下：
bindinput的语法格式
在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：
①通过bindinput，可以为文本框绑定输入事件
?
1
<input bindinput="inputHandler"></input>
②在页面的.js文件中定义事件处理函数
?
1
2
3
4
5
6
Page({
inputHandler(e){
// e.detail.value 是变化过后，文本框的最新值
console.log(e.detail.value)
}
})
运行结果如下：
实现文本框和data之间的数据同步
实现步骤
①定义数据
?
1
2
3
4
5
Page({
data:{
msg:你好,
},
})
②渲染结构
?
1
<input value="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{msg}}" bindinput="iptHandler"></input>
③美化格式
?
1
2
3
4
5
6
input{
border:1px solid #eee;
padding:5px;
margin:5px;
border-radius:3px;
}
④绑定input事件处理函数
?
1
2
3
4
5
6
iptHandler(e){
this.setData({
// 通过e.detail.value 获取文本框最新值
msg:e.detail.value
})
}
运行结果如下：
您可能感兴趣的文章:微信小程序中如何使用store数据共享微信小程序数据请求的方式和注意事项详解小程序中实现获取全部数据的图文教程微信小程序网络数据请求服务实现详解微信小程序前后端数据交互的详细图文教程微信小程序全局数据共享和分包图文详解微信小程序数据-使用实例详解
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~