vant list列表 滑动加载

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="item in list" :key="item" :title="item" /> </van-list>

export default { 
　　data() { 
　　　　return { 
　　　　　　list: [],
　　　　　　loading: false,
　　　　　　finished: false,
　　　　}; 
　　　}, 
　　　methods: { 
　　　　onLoad() { // 异步更新数据 // setTimeout 仅做示例，真实场景中一般为 ajax 请求 
　　　　　　setTimeout(() => { for (let i = 0; i < 10; i++) { this.list.push(this.list.length + 1); }
　　　　　　 // 加载状态结束 
　　　　　　　this.loading = false; 
　　　　　　// 数据全部加载完成 
　　　　　　if (this.list.length >= 40) { 
　　　　　　　　this.finished = true; } }, 1000); },
　　　　　　　　}, 
　　　　　　};