List 列表

介绍

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

引入

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

代码演示

基础用法

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

  1. <van-list
  2. v-model="loading"
  3. :finished="finished"
  4. finished-text="没有更多了"
  5. @load="onLoad"
  6. >
  7. <van-cell
  8. v-for="item in list"
  9. :key="item"
  10. :title="item"
  11. />
  12. </van-list>
  1. exportdefault{
  2. data(){
  3. return{
  4. list:[],
  5. loading:false,
  6. finished:false
  7. };
  8. },
  9. methods:{
  10. onLoad(){
  11. // 异步更新数据
  12. setTimeout(()=>{
  13. for(let i =0; i <10; i++){
  14. this.list.push(this.list.length +1);
  15. }
  16. // 加载状态结束
  17. this.loading =false;
  18. // 数据全部加载完成
  19. if(this.list.length >=40){
  20. this.finished =true;
  21. }
  22. },500);
  23. }
  24. }
  25. }

错误提示

若列表数据加载失败,将error设置成true即可显示错误提示,用户点击错误提示后会重新触发 load 事件。

  1. <van-list
  2. v-model="loading"
  3. :error.sync="error"
  4. error-text="请求失败,点击重新加载"
  5. @load="onLoad"
  6. >
  7. <van-cell
  8. v-for="item in list"
  9. :key="item"
  10. :title="item"
  11. />
  12. </van-list>
  1. exportdefault{
  2. data(){
  3. return{
  4. list:[],
  5. error:false,
  6. loading:false
  7. };
  8. },
  9. methods:{
  10. onLoad(){
  11. fetchSomeThing().catch(()=>{
  12. this.error =true;
  13. })
  14. }
  15. }
  16. }

状态变化

List有以下三种状态,理解这些状态有助于你正确地使用List组件:

  • 非加载中,loadingfalse,此时会根据列表滚动位置判断是否触发load事件(列表内容不足一屏幕时,会直接触发)
  • 加载中,loadingtrue,表示正在发送异步请求,此时不会触发load事件
  • 加载完成,finishedtrue,此时不会触发load事件在每次请求完毕后,需要手动将loading设置为false,表示加载结束

API

Props

参数说明类型默认值版本
v-model是否处于加载状态,加载过程中不触发load事件Booleanfalse-
finished是否已加载完成,加载完成后不再触发load事件Booleanfalse-
error是否加载失败,加载失败后点击错误提示可以重新触发load事件,必须使用sync修饰符Booleanfalse-
offset滚动条与底部距离小于 offset 时触发load事件Number300-
loading-text加载过程中的提示文案String加载中…1.1.1
finished-text加载完成后的提示文案String-1.4.7
error-text加载失败后的提示文案String-1.5.3
immediate-check是否在初始化时立即执行滚动位置检查Booleantrue-
direction滚动触发加载的方向,可选值为upStringdown1.6.16

Events

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

方法

通过 ref 可以获取到 list 实例并调用实例方法

方法名参数返回值介绍
check--检查当前的滚动位置,若已滚动至底部,则会触发 load 事件

Slots

名称说明
default列表内容
loading自定义底部加载中提示

List 列表 - 图1