uni-app框架+vue3 实现上拉加载和下拉刷新功能

前言：哈喽，大家好，我是码喽的自我修养！之前给大家分享了【vue2+uniapp实现上拉加载和下拉刷新功能】uni-app框架+vue2 实现上拉加载和下拉刷新功能https://blog.csdn.net/2301_78542842/article/details/140626170?spm=1001.2014.3001.5502

然后有小伙伴@我使用vue3来实现，今天它来啦！创作不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

一、实现上拉加载更多

1.配置pages.json

2.声明onReachBottom事件处理函数

3.进行新旧数据的拼接处理

4.增加是否没有更多数据的判断

二、实现下拉刷新

1.配置pages.json

2.声明onPullDownRefresh事件处理函数

3.修改getWallListData函数并调用结束刷新API

一、实现上拉加载更多

1.配置pages.json

打开项目根目录中的pages.json配置文件，为想要实现上拉加载的页面配置上拉触底的距离：

		{"path" : "pages/classlist/classlist","style" : {"navigationBarTitleText" : "咸虾米壁纸分类列表","enablePullDownRefresh" : true,"onReachBottomDistance": 50}},

2.声明`onReachBottom`事件处理函数

在vue文件中声明onReachBottom事件处理函数，用来监听页面的上拉触底行为：

	// 触底加载onReachBottom(()=>{queryParams.value.pageNum++getWallListData()})

3.进行新旧数据的拼接处理

改造getWallListData函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

	// 获取分类壁纸列表let wallList = ref([])const getWallListData =async ()=>{let res = await getWallList(queryParams.value)wallList.value = [...wallList.value,...res.data]}

4.增加是否没有更多数据的判断

如果已经是最后一页数据了，则在底部显示没有更多，如下图：

先定义是否是最后一页的变量

	let isBottom = ref(false)

修改getWallListData方法，判断数据是否加载完毕，如果下面的公式成立，则证明没有下一页数据了：

queryParams.value.pageSize > res.data.length

	let wallList = ref([])const getWallListData =async ()=>{let res = await getWallList(queryParams.value)if(queryParams.value.pageSize>res.data.length) isBottom.value = truewallList.value = [...wallList.value,...res.data]}

修改onReachBottom事件处理函数如下：

	// 触底加载onReachBottom(()=>{if(isBottom.value)returnqueryParams.value.pageNum++getWallListData()})

同时在template模版中，在页面底部可以引入uniAPP的一个扩展组件uni-load-more ，根据isBottom 变量的状态来动态显示加载中还是没有更多。

	<view class="loadingLayout" v-if="wallList.length || isBottom"><uni-load-more :status="isBottom?'noMore':'loading'"></uni-load-more></view>

如果isBottom为false，那么用户滑到底部则显示加载中

如果isBottom为true，那么用户滑到底部则显示没有更多了

二、实现下拉刷新

1.配置pages.json

在pages.json配置文件中，为当前的classList页面单独开启下拉刷新效果：

		{"path" : "pages/classlist/classlist","style" : {"navigationBarTitleText" : "咸虾米壁纸分类列表","enablePullDownRefresh" : true,"onReachBottomDistance": 50}},

2.声明`onPullDownRefresh`事件处理函数

监听页面的onPullDownRefresh事件处理函数：

	// 下拉刷新	onPullDownRefresh(()=>{// 1. 重置关键数据wallList.value = []isBottom.value = falsequeryParams.value.pageNum=1getWallListData()})

3.修改`getWallListData`函数并调用结束刷新API

修改getWallListData函数，并通过uni.stopPullDownRefresh()结束刷新动态

	// 获取分类壁纸列表let wallList = ref([])const getWallListData =async ()=>{let res = await getWallList(queryParams.value)uni.stopPullDownRefresh()if(queryParams.value.pageSize>res.data.length)isBottom.value = truewallList.value = [...wallList.value,...res.data]}

到此这篇关于vue3+uni-app框架实现上拉加载下拉刷新功能的文章就介绍到这了,更多相关Vue和uni-app的内容请关注本人以前的文章或继续浏览下面的文章，希望大家多多支持码喽的自我修养~💕

🚀 个人简介：某大型国企高级前端开发工程师，7年研发经验，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养❣️
📝 专栏：uniApp与微信小程序

🌈 若有帮助，还请 关注➕点赞➕收藏 ，不行的话我再努努力💪💪💪