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)渲染使用:
