vue vant组件配合vue-router完成加载更多

<template>
    <div class="">
        <van-sticky>
            <div>
                <van-nav-bar style="background-color: #FF5777;" @click-left="onClickLeft">
                    <template #left>
                        <van-icon name='arrow-left' color="#FFFFFF" size="16px">
                        </van-icon>
                        <span style="color: #FFFFFF;font-size: 16px;padding-left: .1rem;">返回</span>
                    </template>
                    <template #title>
                        <span style="color: #FFFFFF;">新生列表</span>
                    </template>
                </van-nav-bar>

                <!-- 学生导航 -->
                <van-row type="flex" justify="space-between" class='my-stu-nav'>
                    <van-col span="6">姓名</van-col>
                    <van-col span="6">学号</van-col>
                    <van-col span="6">领物品</van-col>
                    <van-col span="6">缴费</van-col>
                </van-row>
                <form action="">
                    <van-search v-model="keywords" show-action placeholder="请输入学生姓名或学号" @search="onSearch" @cancel="onCancel" />
                </form>
            </div>
        </van-sticky>

        <!-- 学生列表 -->
        <div>
            <van-list v-model="loading" :finished="finished" :immediate-check='immediate' finished-text="没有更多了" @load="onLoadMore">
                <van-row type="flex" v-for='(item,index) in list' :key='item.id' @click="gotoDetail(item.id)" justify="space-between" class='my-stu-list'>
                    <van-col span="6">{{item.name}}</van-col>
                    <van-col span="6">{{item.no}}</van-col>
                    <van-col span="6">{{item.is_get}}</van-col>
                    <van-col span="6">{{item.is_pay}}</van-col>
                </van-row>
            </van-list>
        </div>

    </div>
</template>

<script>
    import {get_student_list} from '@/model/student.js'

    export default {
        name: '',
        data() {
            return {
                keywords: '',
                list: [],

                loading: false,
                finished: false,
                immediate:true,
                
                page:1,
                pagesize:20
            }
        },
        created() {
        },
        watch: {
            //监听属性和事件
        },
        methods: {
            //加载数据
            onLoadMore() {
                // 异步更新数据
                get_student_list(this.keywords,this.page,this.pagesize).then(res=>{
                    if(res.code == 100000){
                        if(this.page == 1){
                            this.list = res.result
                        }else{
                            this.list = this.list.concat(res.result)
                        }
                        this.page = this.page + 1
                        // 加载状态结束
                        this.loading = false;
                    }else{
                        //数据全部加载完成
                        this.finished = true;
                    }
                })
            },

            //点击返回
            onClickLeft() {
                this.$router.back()
            },
            //点击搜索
            onSearch() {
                this.page = 1
                this.onLoadMore();
            },
            //取消搜索
            onCancel() {
                this.page = 1
                this.onLoadMore();
            },
            //跳到详情
            gotoDetail(id) {
                this.$router.push('/stu/detail/' + id)
            }
        },
        computed: {
            //计算属性

        },
        
        beforeCreate() {
            //console.log('beforeCreate函数......');
        },
        beforeMount() {
            //mounted函数时页面标签的内容基本还没有渲染完成
        },
        
        mounted() {
            //mounted函数时页面标签的内容基本已经渲染完成时调用这个函数
        },
        beforeDestroy() {
            //console.log('beforeDestroy函数......');
        },
        destroyed() {
            //console.log('destroyed函数......');
        },
        beforeUpdate() {
            //当数据发生改变时，在标签没有被渲染之前触发
        },
        updated() {
            //当数据发生改变时，在标签被渲染后触发
        }
    }
</script>

<style scoped>
    .my-stu-nav {
        background-color: #1989FA;
        text-align: center;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        color: #FFFFFF;
    }

    .my-stu-list {
        text-align: center;
        height: 45px;
        font-size: 14px;
        line-height: 45px;
        border-bottom: 2px solid #EBE8E8;
    }
</style>