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

谁践踏了优雅 2021-09-08 16:12 453阅读 0赞

<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>

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>

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