当前位置：首页 > news >正文

微信小程序常用的事件

news 文章来源：https://blog.csdn.net/qq_74472152/article/details/140041937 2025/5/18 2:19:34

1.点击事件

WXML 中绑定点击事件：

<!-- index.wxml -->
<button bindtap="handleTap">点击我</button>

对应的 JS 文件中编写点击事件处理函数：

// index.js
Page({handleTap: function() {console.log('按钮被点击了');}
});

2.input事件

在微信小程序中，input 事件用于监听用户在输入框中输入内容的操作。当用户在输入框中输入内容时，会触发 input 事件，并可以获取到用户输入的内容。以下是一个简单的示例：

WXML 中绑定 input 事件：

<!-- index.wxml -->
<input placeholder="请输入内容" bindinput="handleInput" />

对应的 JS 文件中编写 input 事件处理函数：

// index.js
Page({handleInput: function(event) {console.log(event.detail.value);}
});

3.输入事件

在微信小程序中，除了input事件外，还有一些其他与输入相关的事件可以用于处理用户在输入框中的操作。以下是一些常用的与输入相关的事件：

input事件：用于监听输入框内容的实时输入变化。
focus事件：当输入框获得焦点时触发。
blur事件：当输入框失去焦点时触发。
confirm事件：用户在输入框中按下完成按钮时触发。
keydown事件：当用户按下键盘按键时触发。
keypree事件：当用户按下并释放键盘按键时触发。
keyup事件：当用户释放键盘按键时触发。

这些事件可以根据具体的需求来选择使用，例如可以通过监听input事件实时获取用户输入的内容，在confirm事件中处理用户输入完成的操作，在blur事件中做一些失去焦点的处理等。

4.生命周期事件

每个页面都有一套生命周期事件，用来管理页面的初始化、渲染、交互等不同阶段的操作。以下是常见的页面生命周期事件：

onLoad: 页面加载时触发，可以在其中获取页面参数并进行数据初始化操作。
onShow: 页面显示时触发，一般用于页面每次显示都需要执行的操作。
onReady: 页面初次渲染完成时触发，可以进行页面渲染完毕后的操作。
onHide: 页面隐藏时触发，一般用于清理页面数据或其他操作。
onUnload: 页面卸载时触发，一般用于清理页面数据、监听器等操作。
onPullDownRefresh: 下拉刷新时触发，一般用于处理下拉刷新的逻辑。
onReachBottom: 滚动到页面底部时触发，一般用于上拉加载更多数据。
onShareAppMessage: 用户点击转发按钮或右上角菜单“转发”时触发，可以自定义转发内容。

这些生命周期事件分别对应了页面不同阶段的操作，开发者可以根据需要重写这些生命周期事件，在相应的阶段执行对应的逻辑。通过合理使用生命周期事件，可以实现页面的初始化、数据处理、交互等功能，提升用户体验和页面性能。

5.页面滚动事件

可以通过监听scroll事件来实现页面的滚动事件处理。当页面内容发生滚动时，会触发scroll事件，开发者可以在事件处理函数中获取到页面滚动的相关信息，进行相应的逻辑处理。

监听页面滚动事件：

Page({onPageScroll: function(e) {console.log('页面滚动距离：', e.scrollTop);// 可以在这里处理页面滚动时的逻辑}
})

onPageScroll生命周期函数用于监听页面滚动事件，每当页面滚动时都会触发这个函数。可以在函数内部获取滚动的距离等信息。
可以根据页面滚动的具体需求，进行一些动态效果、懒加载、导航栏显示隐藏等操作。
注意不要在滚动事件处理函数中进行过于频繁或复杂的操作，避免影响页面滚动的性能。

通过监听页面滚动事件，可以实现一些与页面滚动相关的交互效果

6.表单事件

表单组件常见的事件包括bindsubmit、bindreset、bindinput和bindblur等。这些事件用于处理表单提交、重置、输入以及失去焦点等操作。

`1.bindsubmit`：

表单提交事件，在表单组件包含<form>标签时，当用户点击提交按钮时会触发该事件。

<form bindsubmit="formSubmit"><!-- 表单内容 --><button formType="submit">提交</button>
</form>

2.`bindreset`：

表单重置事件，在表单组件包含<form>标签时，当用户点击重置按钮时会触发该事件。

<form bindreset="formReset"><!-- 表单内容 --><button formType="reset">重置</button>
</form>

`3.bindinput`：

输入事件，在用户输入内容时实时触发该事件，可用于获取用户输入的内容并实时处理。

<input bindinput="inputChange" />

`4.bindblur`：

失去焦点事件，在用户输入框失去焦点时触发，可用于实时校验输入内容或其他操作。

<input bindblur="inputBlur" />

通过合理使用表单事件，可以对用户的输入行为进行响应和处理，实现更加交互丰富的表单功能。

7.触摸事件

在微信小程序中，可以通过绑定一系列触摸事件来实现对用户触摸操作的响应。常用的触摸事件包括touchstart、touchmove、touchend、touchcancel等。这些触摸事件可以分别在用户开始触摸屏幕、移动手指、结束触摸、取消触摸等情况下触发相应的事件处理函数。

以下是常见的触摸事件以及事件处理的简要说明：

touchstart：当手指触摸屏幕时触发，可以在事件处理函数中获取触摸点的坐标等信息。

touchmove：当手指在屏幕上移动时触发，可以在事件处理函数中获取触摸移动的距离和方向等信息。

touchend：当手指离开屏幕时触发，可以在事件处理函数中获取最后一次触摸点的坐标等信息。

touchcancel：当触摸动作被打断，如系统事件、手指移出屏幕等情况触发。一般在触摸过程中发生系统事件（如来电）时触发。

<view 
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
bindtouchcancel="touchCancel"
class="touch-view"></view>

Page({touchStart: function(e) {console.log('触摸开始:', e.changedTouches[0]);},touchMove: function(e) {console.log('触摸移动:', e.changedTouches[0]);},touchEnd: function(e) {console.log('触摸结束:', e.changedTouches[0]);},touchCancel: function(e) {console.log('触摸取消:', e.changedTouches[0]);}
})

8.自定义事件

在微信小程序中，可以通过自定义事件来实现组件之间的通信，或者在页面中实现不同部分之间的交互。自定义事件可以通过triggerEvent触发，也可以通过bind和catch来监听和捕获自定义事件。

以下是自定义事件的基本使用方法：

1.触发自定义事件：在组件中使用 triggerEvent 方法触发自定义事件，可以传递参数给事件处理函数。

// 在组件中触发自定义事件
this.triggerEvent('customEventName', { data: 'custom data' });

2.监听自定义事件：在组件或页面中使用 bind 来监听自定义事件，然后在对应的事件处理函数中处理逻辑。

<!-- 在组件或页面中监听自定义事件 -->
<child-component bind:customEventName="onCustomEvent" />

// 在组件或页面中定义自定义事件的处理函数
Page({onCustomEvent: function(event) {console.log('接收到自定义事件', event.detail);}
})

3.捕获自定义事件：在组件或页面中使用 catch 来捕获自定义事件，然后在对应的事件处理函数中处理逻辑。

<!-- 在组件或页面中捕获自定义事件 -->
<child-component catch:customEventName="onCustomEventCapture" />

// 在组件或页面中定义自定义事件的捕获处理函数
Page({onCustomEventCapture: function(event) {console.log('捕获到自定义事件', event.detail);}
})