微信小程序页面事件，下拉刷新事件和上拉触底事件

这篇具有很好参考价值的文章主要介绍了微信小程序页面事件，下拉刷新事件和上拉触底事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 下拉刷新事件

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

1.1. 开启下拉刷新

开启下拉刷新有两种方式：全局和局部。一般的话是开启局部下刷新，哪里用到哪里开。

全局开启下拉刷新
● 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
局部开启下拉刷新
● 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

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

同样配置下拉刷新的窗口样式，也有两种方式。
在app.json中配置window里面的属性，或者在当前页面的.json文件中进行配置。
backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值 backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light.

{
    "usingComponents": {},
     // 开启下拉刷新
    "enablePullDownRefresh": true,
     // 下拉刷新配置项
    "backgroundTextStyle": "dark",
    "backgroundColor": "#efefef"
}

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

在当前页面的.js文件中，通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。通过stopPullDownRefresh()函数来停止恢复下拉框。

onPullDownRefresh() {
    // 刷新数据的代码块
    // ...
    // 下拉刷新数据后自动回弹  将loading的样式取消
    wx.stopPullDownRefresh()
},

2. 上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
比如，微信小程序中最常用的，一直往下滑，当快要到达底部时，数据会刷新并且填充到当前页面，这就是上拉触底事件。

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

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

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom() {
    console.log("触发上拉触底事件")
},

2.2. 配置上拉触底的距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。文章来源地址https://www.toymoban.com/news/detail-561727.html

到了这里，关于微信小程序页面事件，下拉刷新事件和上拉触底事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！