因为是第一次用vantUI所以很多地方还不是很熟,这个vant-list列表加载数据又需要在很多地方用到,这里记一下正确的用法。。
这里先说一下会遇到的问题。
- 会无限请求接口
- 列表不会滚动始终只展示第一页的数据
贴组件代码
<template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" finished-text="没有更多了" > <van-cell v-for="item in articlesList" :title="item.name_display"> <template #label> <van-image :src="timesrc" /> <span class="article-box-time">{{ item.name_display }}</span> </template> </van-cell> </van-list> </van-pull-refresh> </template>
这里就不作过多解释,官方文档对每个属性都有解释,这里我强调一下loading表示是否加载,finished表示是否加载完所有数据(一直请求接口的问题可能存在这里)
JS
data() { return { loading: false, //加载状态 finished: false, //加载完成 refreshing: false, query: { currentPage: 1, pageSize: 10, }, articlesList: [], } },
这里有个问题,当loading设置为false时,首次加载的时候会触发2次请求,但是设置为true后,页面又无法向下滚动,这里暂时记一下这个问题。。
重点说一下加载代码
首先在methods中获取列表数据的方法
getList() { getArticlesList({ limit: this.query.pageSize, page: this.query.currentPage - 1, title: this.title, }) .then((msg) => { const rows = msg.list; if ( rows === null || rows.length === 0 || this.query.pageSize * this.query.currentPage > msg.meta.total ) { this.finished = true; } this.articlesList = this.articlesList.concat(rows); }) .finally(() => { this.refreshing = false; this.loading = false; }); },
这个getArticlesList是我请求后台的方法,也就是axios或ajax请求数据,title是筛选条件可以忽略。
mag.meta.total是后台返回的总条数。
这里就是说当当前页数 x 每页的总数 > 总记录数 就表示所有数据已经加载完成就可以设置finished为true(之前一直通过其他形式来判断的有问题,目前这种是最好的方法)
然后无论是否请求成功都需要将loading设置为false
然后onLoad中需要去加载这个方法,因为列表会向下滚动,所以注意这里要将页数+1,也就是this.qurey.currentPage ++
onLoad() { this.query.currentPage++; this.getList(); },
然后在created中请求的是getList()而不是请求onLoad()方法,这里也要记一下。。
created() { this.getList() }
最后向下拉刷新的方法
//下拉刷新 onRefresh() { this.finished = false this.query.currentPage = 1 this.getList() },