vant分页

刚开始写分页写的乱起八糟，这次来总结一下

html部分：

给最外面的盒子一个固定高度，这个高度为滚动高度，让它overflow

里面就可以使用vant -> v-for

---

js部分画重点：

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

<template>
    <div class="article-list-box">
       <van-list   v-model="loading" 
                        :finished="finished" 
                        :finished-text="$t('home.nomore')"
                        @load="loadMore" :immediate-check="false">
             <div class="article-item" v-for="item in articleList">
                {{item.title}}
              <div>
        </van-list>   
    </div>
</template>
<script>

export default {
    data() {
        return {
             searchForm: {
                pageNum: 1,
                pageSize: 4
            },
            articleList: [],
            total: 0,
            loading: false,
            finished: false,
        }
    },
    created() {
    },
    methods: {
         loadMore(){
            if(this.articleList.length >= this.total){
                this.finished = true  
            }else {
                this.searchForm.pageNum++;
                listArticle(this.searchForm).then(res => {
                    this.articleList.push.apply(this.articleList,res.rows)
                    this.total = res.total
                    this.loading = false;   
                })
            }
           
        },
    }
};
</script>


<style scoped lang="less">
 .article-list-box {
     overflow: auto;                            //一定要给
     height: calc(var(--vh) * 100 - 3.125rem);  //高度要固定，可滚动的高度
}

</style>