小程序学习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表示
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
编程千纸鹤3 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
@小博的博客3 小时前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
说私域3 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel