小程序学习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表示
相关推荐
Json_1817901448015 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
HerayChen20 分钟前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
风尚云网38 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020440 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing42 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome