小程序的事件绑定

2024-12-26

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种：

第一种方式：bind：事件名，bind 后面需要跟上冒号，冒号后面跟上事件名，例如：<view bind：tap=“fnName“><view> 第二种方式：bind事件名，bind 后面直接跟上事件名，例如：<view bindtap=“fnName“><view>

事件处理函数需要写到，js 文件中，在js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。

按钮

按钮样式

用type属性，有primary, warn和default

<button type="primary">绑定事件</button>

如果需要有边框无背景的按钮，加一个plain属性就行

按钮尺寸

用size属性，选择mini即可。

事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递，即触发父节点事件

非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递

使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。

事件传参

方法一：data-

在组件上通过 data-的方式定义需要传递的数据，其中是自定义的属性，例如：<view data-id=“100“ bindtap=“handler”/> 然后通过事件对象进行获取自定义数据。

注意：

如果传参带有-号，会被系统自动转成驼峰写法；但如果你传的是驼峰写法，全部会变成小写。所以，变量名最好写成全部小写。

方法二： mark标记传递参数

注意：可以一并获得父节点的mark数据。

<view mark:id="100" bindtap="handler" />