之前做无限下拉加载数据的功能都是通过监听页面滚动来实现的,代码量多而且还麻烦,最后还得销毁监听滚动的状态。
正巧项目用的Vant框架,于是乎抽空用Vant提供的列表组件来改造一下,代码一下子就清爽好多!
Vant列表组件基础用法
List组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。
Demo
本Demo根据我的项目改造而来,仅供参考哈,实际使用还是得结合你们自己的项目来哈!
template部分
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<div v-for="(item,index) in list" :key="index">
{{item}}
</div>
</van-list>
js部分
export default {
name: "List",
data() {
return {
current: 1, // 当前页码
pageSize: 10, // 每页数量
loading: false, // 加载状态
finished: false, // 是否结束
list: [], // 列表数据
};
},
methods: {
getList() {
let that = this
// 这里是我封装的接口请求方法
GET_LIST(
{
page: that.current,
pageSize: that.pageSize,
},
function (res) {
if (res.data.code === 0) {
// 数据更新完毕后,将loading设置成false
that.loading = false
// 这边碰到一个问题,配合tab切换的时候onLoad执行两遍导致数据重复
// 解决方案:如果list有数据并且是第一页,那肯定是重复请求了,所以阻断掉
if (that.list.length > 0 && res.data.data.current_page == 1) {
return false
}
that.list = that.list.concat(res.data.data.data)
// 判断总页数是否大于当前页
if (res.data.data.last_page > that.current) {
that.current += 1;
} else {
that.finished = true;
}
}
}
)
}
}
};