list组件的基本使用

Delusion658

于 2023-03-08 13:11:05 发布

阅读量122

点赞数 1

文章标签： list java html

本文链接：https://blog.csdn.net/weixin_61460113/article/details/129401435

版权

该文章展示了如何在Vue.js应用中使用van-list组件进行数据加载。van-list通过v-model绑定loading状态，@load触发加载方法onLoad。onLoad中模拟异步数据更新，当数据加载完毕或达到特定条件时，更新finished状态来表示加载完成。此组件适用于上拉加载更多场景。

摘要由CSDN通过智能技术生成

- 示例代码如下（从官网复制，记得先导入）

```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