当前位置：首页 > news >正文

前端开发中列表无限加载功能的实现与优化

news 来源：原创 2025/4/27 6:19:34

在如今的 Web 应用开发中，为了给用户提供更加流畅、高效的体验，许多应用都会采用列表无限加载的技术，比如常见的社交媒体动态列表、电商商品列表等。

下面，我将结合实际项目，详细介绍列表无限加载功能的实现过程。

一、实现原理

列表无限加载功能的核心原理是利用elementPlus提供的v-infinite-scroll指令，通过监听页面滚动事件，判断是否满足触底条件。

当满足触底条件时，增加页数参数，获取下一页的数据，并将新数据与老数据进行拼接，重新渲染列表，从而实现列表的无限加载效果。

在加载完成所有数据后，停止监听滚动事件，避免无效请求。

二、具体实现步骤

（一）准备接口

在实现无限加载之前，需要准备好获取数据的接口。以项目中的getSubCategoryAPI接口为例，它接收包含categoryId（分类 ID）、page（当前页数）、pageSize（每页数据量）和sortField（排序字段）等参数的对象，通过POST请求从服务器获取相应的数据。

/*** @description: 获取导航数据* @data { categoryId: 1005000 ,page: 1,pageSize: 20,sortField: 'publishTime' | 'orderNum' | 'evaluateNum'} * @return {*}*/
export const getSubCategoryAPI = (data) => {return request({url:'/category/goods/temporary',method:'POST',data})

（二）初始化数据

在 Vue 组件中，定义用于存储商品列表数据的响应式变量goodList，并初始化请求数据对象reqData，设置初始的categoryId、page、pageSize和sortField。同时，定义一个用于判断是否加载完毕的响应式变量disabled，初始值设为false。

<script setup>
// 获取基础列表数据渲染
const goodList = ref([])
const reqData = ref({categoryId: route.params.id,page: 1,pageSize: 20,sortField: 'publishTime'
})
// 判断是否加载完毕
const disabled = ref(false)
</script>

（三）加载更多数据的逻辑实现

定义加载更多数据的函数load，在函数内部，首先将reqData中的page值加 1，以获取下一页的数据。然后调用getSubCategoryAPI接口，并将新获取的数据与原有的goodList数据进行拼接。

最后，根据新获取数据的长度判断是否已经加载完所有数据，如果新数据长度为 0，则表示已全部加载完毕，将disabled设为true，停止后续的加载操作。

// 加载更多
const load = async () => {console.log('加载更多数据咯')// 获取下一页的数据reqData.value.page++const res = await getSubCategoryAPI(reqData.value)goodList.value = [...goodList.value, ...res.result.items]// 加载完毕 停止监听if (res.result.items.length === 0) {disabled.value = true}

（四）配置`v-infinite-scroll`指令

在模板中，使用v-infinite-scroll指令绑定load函数，并设置infinite-scroll-disabled属性为disabled。这样，当页面滚动到触底位置时，会自动调用load函数加载更多数据，并且在数据全部加载完毕后，停止触发加载操作。

<template><div v-infinite-scroll="load" infinite-scroll-disabled="disabled"><!-- 商品列表展示部分 --><div v-for="(item, index) in goodList" :key="index"><!-- 展示商品的具体信息，如图片、名称、价格等 --><img :src="item.image" alt="商品图片"><p>{{ item.name }}</p><p>{{ item.price }}</p></div></div>
</template>