Vant List list

Introduced

Waterfall flow scroll loading, which is used to display long lists that trigger events and load more list items when the list is about to scroll to the bottom.

Introduced

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

Vue.use(List);

Code demo

Basic usage

The List component controls the loading state through two variables, loading and setting the load to true when the component scrolls to the bottom. A t this point, you can initiate asynchronous operations and update the data, after the data is updated, set the loading to false. If the data is fully loaded, set the finished directly to true.

<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);
    }
  }
}

Error prompt

If the list data fails to load, setting the error to true displays an error prompt, and the load event is re-triggered when the user clicks the error prompt.

<van-list
  v-model="loading"
  :error.sync="error"
  error-text="请求失败，点击重新加载"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list: [],
      error: false,
      loading: false
    };
  },
  methods: {
    onLoad() {
      fetchSomeThing().catch(() => {
        this.error = true;
      })
    }
  }
}

Pull-down refresh

The List component can be used in conjunction with the PullRefresh component for a pull-down refresh

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

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        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);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

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

Api

Props

Events

Method

Ref allows you to get to the List instance and call the instance method, as detailed in the component instance method

Slots

Problems

How do Lists work?

List listens for scrolling events in the browser and calculates the location of the list, triggering a load event when the distance from the visual area at the bottom of the list is less than offset.

Why does list trigger load events as soon as they are initialized?

List initialization triggers a load event to load the first screen of data, a feature that can be turned off by the immediate-check property.

Why does the load event fire continuously?

If a request loads a small number of data bars, causing the list content to not be able to cover the current screen, List continues to trigger the load event until the content is full or the data is fully loaded. So you need to adjust the number of data bars you get each time, and ideally the number of bars you get per request should be able to fill a screen height.

What do loading and finished mean, respectively?

List has three states that help you use the List component correctly:

• In non-loading, loading is false, where a load is used to determine whether a load event is triggered based on the scrolling position of the list (which is triggered directly when the list is less than one screen)
• In the load, the load is true, indicating that an asynchronous request is being sent and the load event is not triggered at this time
• The load is complete, the finished is true, and the load event is not triggered at this time

After each request is complete, you need to manually set the load to false, indicating that the load is over

Trigger loading all the time after using the float layout?

If list content uses a float layout, you can add a van-clearfix class name to the container to clear the float, allowing List to correctly determine the location of the element

<van-list>
  <div class="van-clearfix">
    <div class="float-item" />
    <div class="float-item" />
    <div class="float-item" />
  </div>
</van-list>

Trigger loading after setting overflow on html, body?

If you set the overflow-x: hidden style on the html and body tabs, the List causes the load to be triggered all the time.

html,
body {
  overflow-x: hidden;
}

The problem is that when an element is set to overflow-x: hidden, the overflow-y of the element is set by the browser to auto instead of the default value, causing List to fail to correctly determine the scroll container. The workaround is to remove the style, or add a height: 100% style to the html and body labels.