Vant Ui van-list列表用法

HTML代码

 <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代码

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

最后

以上就是傻傻高山为你收集整理的Vant Ui van-list列表用法Vant Ui van-list列表用法的全部内容，希望文章能够帮你解决Vant Ui van-list列表用法Vant Ui van-list列表用法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。