小程序学习day05-事件绑定、事件传参(小程序中不能在绑定事件的)、实现文本框和data数据的动态绑定、条件渲染、wx:for

21、事件绑定

(1)事件

1)概念:渲染层到逻辑层的通信方式
2)作用:通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行处理

(2)常见事件

1)tap(手指触摸后马上离开,类似于HTML的click事件):通过bindtap或bind:tap绑定
①语法:

通过bind:tap绑定点击事件

在js中,书写绑定方法的代码

2)input(文本框输入事件):通过bindinput或bind:input绑定
①语法:

通过bindInput,绑定事件

在js中书写处理函数

3)change(状态改变时触发):通过bindchange或bind:change绑定

(3)事件对象的属性(当事件回调触发时,会收到一个事件对象event)(在页面的.js文件中,时间参数的形参event可以简写为e)

1)type(String):事件类型
2)timeStamp(integer):页面打开到触发事件所经过的秒数
3)target(Object):触发事件的组件的一些属性值的集合
4)currentTarget(Object):当前组件的一些属性值的集合
5)detail(Object):额外的信息
6)touches(Array):触摸事件,当前停留在屏幕中的触摸点的信息的数组
7)changedTouches(Array)::触摸事件,当前变化的触摸点的信息的数组

(4)target与currentTartget的区别

1)target是源头组件(最先触发的),而currentTarget是当前事件所绑定的组件。
2)点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层的view的tap事件处理函数。此时,对于外层的view来说:
①e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
②e. currentTartget指向的是当前正在触发事件的组件,即e. currentTartget是当前的view组件

22、事件传参(小程序中不能在绑定事件的同时为事件处理函数传递参数,因为小程序会把bindTap当做事件名称来处理)

(1)通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

(2)语法:

1)传参
data-参数名="参数值"
2)获取
通过(event.target.dataset.参数名)获取
3)示例

23、实现文本框和data数据的动态绑定

(1)步骤:

1)定义数据
2)渲染结构
3)美化样式
4)绑定input事件处理函数

(2)示例

1)定义数据
2)渲染结构
3)美化样式
4)绑定input事件处理函数
5)效果

24、条件渲染

(1)在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染代码块,也可以使用

Wx:elif和wx:else来添加else进行判断

(2)结合<block>使用wx:if

1)作用:一次性控制多个组件的展示与隐藏
2)注:<block>并不是一个组件,他只是一个包裹性质的容器,不会再页面中做任何渲 染。

比如:不会多包裹一层view

(3)hidden

1)作用:控制元素的显示与隐藏
2)语法:在小程序中,直接使用hidden="{{condition}}"

(4)wx:if与hidden的区别

1)运行方式
①wx:if动态创建和移除元素的方式,控制元素的展示与隐藏
②hidden通过切换样式(display:none/block),控制元素的显示与隐藏
2)切换频率
①hidden:频繁切换(类似于v-show)
②wx:if:控制条件复杂,建议使用wx:if搭配wx:elif、wx:else进行频繁切换(类似于v-if)

25、wx:for

(1)作用:可以更具绑定的数组,循环渲染重复的组件结构

(2)语法:wx:for="{{数组}}"

(3)示例:

1)提供数据:
2)渲染使用:

(4)注:

1)默认情况下,当前循环的索引用index表示,当前循环用item表示
相关推荐
ywf12151 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭1 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf7 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特8 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷8 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
2501_933907218 小时前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序
mengchanmian9 小时前
前端node常用配置
前端
sinat_255487819 小时前
读者、作家 Java集合学习笔记
java·笔记·学习
华洛9 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq9 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js