List 列表

瀑布流滚动加载,用于控制长列表的展示

使用指南

  1. import { List } from 'vant';
  2. Vue.use(List);

代码演示

基础用法

  1. <van-list
  2. v-model="loading"
  3. :finished="finished"
  4. @load="onLoad"
  5. >
  6. <van-cell v-for="item in list" :key="item" :title="item + ''" />
  7. </van-list>
  1. export default {
  2. data() {
  3. return {
  4. list: [],
  5. loading: false,
  6. finished: false
  7. };
  8. },
  9. methods: {
  10. onLoad() {
  11. setTimeout(() => {
  12. for (let i = 0; i < 10; i++) {
  13. this.list.push(this.list.length + 1);
  14. }
  15. this.loading = false;
  16. if (this.list.length >= 40) {
  17. this.finished = true;
  18. }
  19. }, 500);
  20. }
  21. }
  22. }

API

参数 说明 类型 默认值
loading 是否显示加载中提示,加载过程中不触发load事件 Boolean false
finished 是否已加载完成,加载完成后不再触发load事件 Boolean false
offset 滚动条与底部距离小于 offset 时触发load事件 Number 300
loading-text 加载中提示文案 String 加载中…
immediate-check 是否在初始化时立即执行滚动位置检查 Boolean true

Event

事件名 说明 参数
load 滚动条与底部距离小于 offset 时触发 -

原文:

https://youzan.github.io/vant/#/zh-CN/list