List 列表配合PullRefresh 实现：下拉刷新，上拉加载更多

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	<van-list 
		v-model="loading" 
		:finished="finished" 
		finished-text="-- 暂无更多数据 --" 
		@load="onLoad" 
		:error.sync="error"
	  	error-text="请求失败，点击重新加载"
		class="list">
	
	    <ul>
	        <li v-for="(item,index) in list" :key="index" @click="to_game(item)">
	            {
    {item}}
	        li>
	    ul>
	van-list>
van-pull-refresh>
<script>
	export default{
      
		data() {
      
            return {
      
                loading: true, // 是否处于加载状态
                finished: false, // 是否已加载完成
                error: false, //是否加载失败
                refreshing: false, // 是否处于加载中状态
                pageNum: 0,
                list: [], //列表数据
            }
        },
        methods:{
      
			// 上拉列表加载更多
			// 基础用法：List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。
            onLoad() {
      
                this.loading = true;
                if (this.pageNum == 0) {
      
                    this.list = [];
                }
                this.pageNum++;
                this.axios.post("/api/game/index", {
      
                    page: this.pageNum,
                    group_id: this.tabShow,
                }).then(res => {
      
                    if (res.status == 1) {
      
                    	// 数据小于10条，已全部加载完毕finished设置为true
                        if (res.data.list < 10) {
      
                            this.finished = true;
                        }
                        
                        //没有数据
                        if (res.data.list.length == 0) {
      
                            this.loading = false;
                            this.finished = false;
                        }

                        this.list = this.list.concat(res.data.list);
                        
                        // 加载状态结束
                        this.loading = false;
                        
                    } else {
      
                        this.$toast(res.msg);
                    }
                }).catch(() => {
      
			        this.error = true;
			    })
            },
            //下拉刷新触发
			onRefresh() {
      
				// 清空列表数据
				this.finished = false;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();//加载
			},
		}
	}
script>