1.页面事件–下拉刷新事件
1.1什么是下拉刷新
下拉式移动端的专有名词，指的是通过手指子在屏幕上的下拉滑动操作，从而重新加载页面数据
2.启动下拉刷新
（1）方法一：全局开启下拉刷新
在app.json的window节点中，将enablePullDownRefresh设置为true
{
"pages": [
"pages/switch/switch",
"pages/navigator/navigator",
"pages/test/test",
"pages/tabBar/tabBar",
"pages/index/index"
],
"window": {
"enablePullDownRefresh": true
}
}
（2）方法二：局部开启下拉刷新
在页面的.json配置文件中，将enablePullDownRefresh设置为true
{
"usingComponents": {},
"enablePullDownRefresh": true
}
在实际开发中，推荐使用第二种方式，为需要的页面单独开启下拉刷新效果。
3.配置下拉刷新窗口的样式
在全局或者页面的.json配置文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：
backgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light
{
"pages": [
"pages/switch/switch",
"pages/navigator/navigator",
"pages/test/test",
"pages/tabBar/tabBar",
"pages/index/index"
],
"window": {
"backgroundTextStyle": "dark",
"backgroundColor":"#bfa",
"enablePullDownRefresh": true
},
}
4.监听页面的下拉刷新事件
在页面的.js文件中，通过onPullDownRefresh()函数可以监听当前页面的下拉刷新是事件。（下拉刷新页面的时候触发该函数的调用）
例如：在页面的wxml中有如下的ui结构，点击按钮可以让count值自增+1，刷新页面将count重置为0
在.wxml中
<view >{{count}}</view>
<button bindtap="handler">点我+1</button>
在.js中
data: {
count:0
},
handler(){
this.setData({
count:this.data.count+1
})
},
onPullDownRefresh() {
//console.log("111");//当页面刷新会被触发
this.setData({
count:0
})
},
5.停止下拉刷新的效果
当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动停止loading的效果。此时，调用wx.stopPullRefresh()可以停止当前页面的下拉刷新。
在.wxml中
<view >{{count}}</view>
<button bindtap="handler">点我+1</button>
在.js中
data: {
count:0
},
handler(){
this.setData({
count:this.data.count+1
})
},
onPullDownRefresh() {
this.setData({
count:0
}),
wx.stopPullDownRefresh();
},
2.页面事件–上拉触底事件
2.1什么是上拉触底
上拉触底是移动端地专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
2.2监听页面的上拉触底事件
在页面的.js文件中，通过onReachBottom()函数即可监听当前的上拉触底事件
在.js中
onReachBottom() {
console.log('触发了上拉触底事件');
},
当wxml的数据够多的时候，当向上滑动触到底的时候，就会触发该方法
2.3配置上拉触底距离
上拉触底指的是触发触底事件，滚动条距离页面底部的距离。
可以在全局或者页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离
小程序默认的触底距离是50px,在实际开发中，可以根据自己的需求修改这个默认值。文章来源：https://www.toymoban.com/news/detail-742096.html
{
"onReachBottomDistance": 10
}
2.3配置上拉触底案例
2.3.1
定义获取随机颜色的方法
在页面加载时获取初始值
渲染ui结构并美化页面效果
在上拉触底时调用获取随机颜色的方法
添加loading提示效果
对上拉触底进行节流处理文章来源地址https://www.toymoban.com/news/detail-742096.html
到了这里，关于【微信小程序】-—下拉刷新、上拉触底事件详细讲解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
](https://imgs.yssmx.com/Uploads/2024/01/824148-1.png)
