vue3前端开发-小兔鲜项目-二级分类页面无限加载的实现

yrldjsbk2024-07-26 21:55

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。让它失效。就不会再向原程服务器发送请求了。