持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

小程序学习篇（五），今天一起学习一下小程序中页面的事件的定义和使用吧！相信学完了小程序系列篇，大家都能开发出自己满意的小程序了。

页面事件 - 下拉刷新事件

1. 什么是下拉刷新

下拉刷新指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

2. 启用下拉刷新

启用下拉刷新有两种方式：

① 全局开启下拉刷新 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

② 局部开启下拉刷新 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

在实际开发中，推荐第2种方式，给需要的页面单独开启下拉刷新的效果。

3. 配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式

backgroundColor 用来配置下拉刷新 窗口的背景颜色 ，仅支持 16 进制的颜色值 backgroundTextStyle 用来配置下拉刷新 loading 的样式 ，仅支持 dark 和 light

4. 监听页面的下拉刷新事件

在触发页面的下拉刷新事件的时候，重新掉列表接口

举个栗子

onPullDownRefresh:function(){
    this.getList()
}

5. 停止下拉刷新的效果

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

举个栗子

onPullDownRefresh:function(){
    this.getList();
    wx.stopPullDownRefresh();
}

页面事件 - 上拉触底事件

1. 什么是上拉触底

上拉触底是通过手指在屏幕上的上拉滑动操作，从而加载更多数据

2. 监听页面的上拉触底事件

在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件

举个栗子

onReachBottom:function(){
    this.getList();
}

3. 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离

小程序默认的触底距离是 50px，可以根据自己的需求修改这个默认值。