vue3前端开发-小兔鲜项目-二级分类页面无限加载的实现！实际的项目开发中，经常会遇到这需求。产品内容庞大，但是用户不可能一次性全部都加载请求的。当客户向下滚动，触碰到插件的底部时，会再次申请下一页内容。这样就会一直加载，直到反馈过来的集合为空停止。

---

第一步，还是准备好调用接口的函数

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

第二步，修改标签属性，新增2个属性标签。

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

 我们这2个标签都是element-plus官方提供好的，我们直接调用就行了。

---

如图，我们已经向下翻页，一直翻看到了第十页了，还是有数据。

如图所示，我们一直向下翻页，到达了第19页的时候，发现了反馈过来的集合为空了。就不会再继续发送请求了。

如图代码所示，

我们做了判定条件，如果反馈过来的集合长度为0，说明没有内容了，我们就设置那个状态参数为true。让它失效。就不会再向原程服务器发送请求了。