Vant Ui van-list列表用法Vant Ui van-list列表用法

87 阅读 0 评论 58 点赞

我是靠谱客的博主傻傻高山，这篇文章主要介绍Vant Ui van-list列表用法Vant Ui van-list列表用法，现在分享给大家，希望可以做个参考。

Vant Ui van-list列表用法

HTML代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="(item, index) in list"
:key="index"
:title="item.news_title"
/>
</van-list>
</div>

JS代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default {
data() {
return {
list: [],
loading: false,
finished: false,
pageNum: 1,
};
},
methods: {
onLoad() {
this.pageNum++
axios({
url: "真实接口地址",
data: {page:this.pageNum},
//根据接口所需的页码参数传
}).then((res) => {
if (res.data.rows.length == 0) {
//获取到数据后判断数组长度是否等于0
this.finished = true;
//如果数组长度为0，代表后续无数据，使finished=true
} else {
//如果有参数，则遍历数组添加至list
res.data.rows.forEach((item) => {
this.list.push(item);
});
}
this.loading = false;
//本次加载完毕，使loading=false
});
},
},
};