Vue3 + Vant4 · List列表组件：渲染+触底加载下一页

复制即用

复制即用。复制到自己的项目中，需要改动的地方已经标出来了，搜索“需要改动” 把这五个地方改成你的项目所需要的数据即可。

<template>
    <div style="height: 70%;">
        <!-- @load滚动条与底部距离小于 offset 时触发 -->
        <list v-model:IsLoading="addressModel.IsLoading" :finished="addressModel.finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false"
            :offset="15">

            <!-- 需要改动 1 -- 渲染数据 -->
            <div v-for="(item,index) in cardList" :key="index"  
                style="background-color: rgb(246, 235, 236);margin-top: 30px; height: 300px;">
               {{ index }} ----  {{ item.tel }}
            </div>
            
        </list>
    </div>
</template>
<script setup>
import cardApi from '../../api/card.api'; // 需要改动 2 --- 引入接口文件
import { ref, onMounted, reactive } from "vue";
import { List } from 'vant';//无需手动导入，我们引入了自动导入的插件


// 需要改动 3 --- 存储的数组
const cardList = ref([]);   //这是存储的数组
const addressModel = reactive({
    init: false,
    pageNum: 1,
    pageSize: 3,
    IsLoading: false, // 非加载中，IsLoading 为 false
    finished: false,  //是否已加载完成，加载完成后不再触发 load 事件  ：初始值一定要给false：表示所有数据都加载完毕。不允许再次触发@load事件。
    error: false,
    errorText: "请求失败，点击重新加载",
    finishedText: "没有更多了"
}) 


onMounted(async () => {

    // 需要改动 4 --- 接口
    //第一次加载列表数据
    cardApi.userPage({ pageNum: addressModel.pageNum, pageSize: addressModel.pageSize }).then(res => {
        if (res.code == 200) {
            console.log(res)
            cardList.value = res.data.records  //将请求到的列表赋值给cardList
        }
    }).catch(err => {
        console.log('错误', err)
    })

})

const onLoad = async () => {
    console.log("滑动到底部了")
    addressModel.pageNum++; //当前页：

    
    // 需要改动 5 --- 接口
    cardApi.userPage({ pageNum: addressModel.pageNum, pageSize: addressModel.pageSize }).then(res => {
        if (res.code == 200) {
            console.log(res) 

            if (res.data.records.length === 0) {  //说明没有获取到数据，也就是说所有的数据全部取完了，真正的到底了
                addressModel.IsLoading = true;
                addressModel.finished = true;
            } else {
                addressModel.IsLoading = false; //表示允许再次触发@load事件
                cardList.value = [...cardList.value, ...res.data.records]  //将请求到的列表赋值给cardList
            }

        }
    }).catch(err => {
        console.log('错误', err)
    })

}

</script>