一、实现上拉加载更多

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 = true
        wallList.value = [...wallList.value,...res.data]
    }

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

	// 触底加载
	onReachBottom(()=>{
		if(isBottom.value)return
		queryParams.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> 

二、实现下拉刷新

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 = false
		queryParams.value.pageNum=1
		getWallListData()
		
	})

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 = true
		wallList.value = [...wallList.value,...res.data]
	}

​

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

​