Vue3---列表无限加载功能实现

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

当加载完毕时，使用指令infinite-scroll-disabled决定是否停止监听

Infinite Scroll 无限滚动 | Element Plus

<script setup>
//获取列表数据
const goodList = ref([])
const reqData = ref({
    categoryId: route.params.id,
    page: 1,
    pageSize: 20,
    sortFiled: 'publishTime'
})
const getGoodList = async () => {
    const res = await getSubCategoryAPI(reqData.value)
    console.log(res)
    goodList.value = res.result.items
}
onMounted(() => getGoodList())

//加载更多
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]  //老数据和新数据拼接
    //加载完毕，停止监听
    if(res.result.items.length===0){
        disabled.value=true
    }
}
</script>
<template>
     <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <!-- 商品列表-->
        <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id"></GoodsItem>
     </div>
</template>