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,在实际开发中,可以根据自己的需求修改这个默认值。