vant 做表格_Vant List 列表

介绍

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

引入import Vue from 'vue';

import { List } from 'vant';

Vue.use(List);

代码演示

基础用法

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

v-model="loading"

:finished="finished"

finished-text="没有更多了"

@load="onLoad"

>

export default {

data() {

return {

list: [],

loading: false,

finished: false

};

},

methods: {

onLoad() {

// 异步更新数据

// setTimeout 仅做示例，真实场景中一般为 ajax 请求

setTimeout(() => {

for (let i = 0; i < 10; i+&