小程序学习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表示
相关推荐
程序员码歌2 小时前
短思考第261天,浪费时间的十个低效行为,看看你中了几个?
前端·ai编程
Swift社区2 小时前
React Navigation 生命周期完整心智模型
前端·react.js·前端框架
若梦plus2 小时前
从微信公众号&小程序的SDK剖析JSBridge
前端
用泥种荷花3 小时前
Python环境安装
前端
Light603 小时前
性能提升 60%:前端性能优化终极指南
前端·性能优化·图片压缩·渲染优化·按需拆包·边缘缓存·ai 自动化
Jimmy3 小时前
年终总结 - 2025 故事集
前端·后端·程序员
烛阴3 小时前
C# 正则表达式(2):Regex 基础语法与常用 API 全解析
前端·正则表达式·c#
roman_日积跬步-终至千里3 小时前
【人工智能导论】02-搜索-高级搜索策略探索篇:从约束满足到博弈搜索
java·前端·人工智能
upper20203 小时前
【炒股学习】集合竞价
学习·区块链
以孝治家行动3 小时前
线上共读传孝道 身体力行润家风——以孝治家家教中心开展线上学习
学习