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