- 示例代码如下(从官网复制,记得先导入)
```HTML
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
```
```JavaScript
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);
},
},
```
- onLoad:
- 用来加载数据的方法,页面一打开只要finished和loading都为false,默认就会调用一次,然后如果没铺满一屏会再调用一次,直到铺满就停止,停止后如果你上拉快底会继续调用
- loading:
- 标记当前是否正在加载
- 为true代表正在加载,会显示加载中
- 为false没有在加载,可以调用onLoad
- 调用onLoad会自动把这个值改成true
- 总结:
- 默认应该是false
- 每次加载完一定要记得改为false,不然不能进行下次加载
- finished:
- 标记是否全部加载完成
- 默认应该是false
- 每次加载完应该判断是否全部加载完,加载完把它改为true