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

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

// 获取基础数据列表渲染
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
  }
}