vant-List 列表-加载刷新-下拉刷新

dom 代码

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <Messages :item-list="itemlist"></Messages>
            </van-list>
        </van-pull-refresh>

js 代码

<script>
export default {
    data() {
        return {
            itemlist:[],
            page_index:1,
            loading:false, // 是否加载
            finished:false, // 是否加载完成
            refreshing:false, // 是否要下拉刷新
        }
    },
    components:{
        Messages
    },
    created() {
        this.getData()
    },
    methods:{
        /*下拉加载，定时为了体现加载间隔*/ 
        onLoad() {
            setTimeout(()=>{
                if(this.refreshing) this.refreshing = false
                this.getData()
            },500)
        },
        /*重新加载*/
        onRefresh() {
            this.finished = false;
            this.loading = true;
            this.page_index = 1
            this.onLoad();
        },
        /*获取数据*/ 
        async getData(){
            const data={
                page_index:this.page_index,
                page_size: 10
            }
            const res = await getMesageData(data)
            this.loading=false
            if(res.success){
                this.itemlist=[...this.itemlist,...res.data]
                this.page_index++
            }
            // 是否加载完成（注意：对比数据建议提供总页数
            this.finished=(res.page_index==res.total_pages)?true:false
        }
    },
}
</script>

按文档进行，基本无误

参考：vant