1、在page.json文件中给需要操作的页面进行处理

enablePullDownRefresh改为true表示开启下拉刷新

onReachBottonDistance设置数值表示距离底部多少距离触发onReachBottom生命周期

2、页面中

vue3写法:

import {
	onReachBottom,
	onPullDownRefresh,
} from '@dcloudio/uni-app';


// 触底逻辑
onReachBottom(() => {
	// 业务逻辑
	console.log('触底')

})
// 下拉刷新
onPullDownRefresh(() => {
	console.log('下拉刷新');    
	uni.stopPullDownRefresh();//处理完逻辑停止刷新
})

vue2:

与vue3区别只是v3需要引入，v2直接写在methods中

methods:{
    
// 触底逻辑
onReachBottom(() => {
	// 业务逻辑
	console.log('触底')

}),
// 下拉刷新
onPullDownRefresh(() => {
	console.log('下拉刷新');    
	uni.stopPullDownRefresh();//处理完逻辑停止刷新
}),

}

3、如果要改变下拉刷新的背景颜色，同样需要在page.json中写入：

{
			"path": "pages/index/indexPages/messagePages/messageList",
			"style": {
				"navigationBarTitleText": "",
				"navigationBarBackgroundColor": "#FCE7C8",//状态栏和导航栏背景色
				"enablePullDownRefresh": true,
				"backgroundColor": "#FCE7C8",//下拉刷新背景色
				"onReachBottomDistance": 50//滚动触底距离触发
			}
		},

比如：