WXML模板语法

161 阅读2分钟

1.数据绑定:在data中定义页面的数据

在页面对应的.js文件中,把数据定义到data对象即可:

image.png

image.png

2.事件绑定

事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

image.png

小程序中常用的事件:

image.png

bindtap的语法格式:在小程序中,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为,

(1)通过bindtap,可以为组件绑定tap触摸事件语法如下:

(2)在页面的.js文件中定义对应的事件处理函数,事件藏书通过形参event来接收

在事件处理函数中为data中的数据赋值:通过调用this.setData(),可以给页面data中的数据重新赋值。

3.事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。,因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于调用一个名称为,如图:

image.png,因此可以为组件提供data-自定义属性传参,其中代表的是参数的名字。 如图:

image.png 在TestInfo方法中,绑定infos属性,属性值为info。

怎么读取属性值呢: 如图所示通过:e.target.dataset.infos

image.png

4.bindinput的语法格式

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:

(1)通过bindinput,可以为文本框绑定输入事件

image.png (2)在页面的.js文件中定义事件处理函数,如图所示:

image.png

实现文本框和data之间的数据同步:

实现步骤:(1)定义数据(2)渲染结构(3)美化样式(4)绑定input事件处理函数