前端Vue3列表滑动无限加载实现

列表无限加载功能实现

核心实现逻辑:使用elementPlus提供的 v-infinite-scrol 指令监听是否满足触底条件，满足加载条件时让页数参数加一获取下一页数据，做新老数据拼接渲染

代码实现

<div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled"><!-- 商品列表--><GoodsItem v-for="item in goodList" :key="item.id" :goods="item" /></div>

v-infinite-scroll="load":监听是否满足触底条件

:infinite-scroll-disabled="disabled": 是否当前禁用加载

// 获取基础数据列表渲染
const goodList = ref([])
const reqData = ref({categoryId: id,page: 1,pageSize: 20,sortField: 'publishTime'
})const getGoodList = async () => {const res = await getSubCategoryAPI(reqData.value)console.log(res)goodList.value = res.result.items
}// 更多加载
const disabled = ref(false)
const load = async ()=>{console.log('加载更多数据了');// 获取下一页数据reqData.value.page++const res = await getSubCategoryAPI(reqData.value)// 新老数据的拼接goodList.value = [...goodList.value, ...res.result.items] // ...goodList.value老数据 ...res.result.items新数据// 加载完毕停止监听（如果不结束监听一直向下滑动，就会不断发送新的请求，会造成一定的资源浪费）if(res.result.items.length === 0){ // 如果新数据为空，则停止监听(可以根据后端返回的数据来判断)disabled.value = true}
}

由上图可以看出前端不停的在向后端发起新的请求，当页面滑动到底部没有数据之后就不会发送请求，这样我们的前端Vue3列表滑动无限加载实现就完成了