VantUI的van-list⼀次性全部加载列表的问题记录⼀个使⽤ Vant UI 开发中遇到的问题，页⾯没有滚动到底部 van-list 就多次调⽤获取列表接⼝直到完成。
<template>
<div class="warpper">
<van-pull-refresh v-model="refreshing"@refresh="onRefresh"> <van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div
v-for="item in myList"
:key="item.id"
>
...
</div>
waving flag歌词
</van-list>
</van-pull-refresh>原来如此日语怎么说
</div>
新喀里多尼亚</template>
honey bee<script>
import{ getAxiosList }from'@/api';joe mcelderry
export default{
困境英语
data(){
return{
杭州前端培训班
myList:[],
page:0,
page_size:5,
loading:fal,
finished:fal,
refreshing:fal
}
},
methods:{
onLoad(){
freshing){
}
this.loading =true;
this.page +=1;
// 调⽤后端接⼝获取列表
美丽中国下载
getAxiosList({
page:this.page,
page_size:this.page_size
}).then(res=>{
if( de ===200){
this.loading =fal;
this.finished =true;
// 数据全部加载完成
if(res.data.data.length >=this.page_size){
this.finished =fal;
}el{
this.finished =true;
}
爱情定义}
});
},
onRefresh(){
// 清空列表数据
this.finished =fal;
},
},
mounted(){
}
}
</script>
英文介绍<style lang="scss"scoped>
.warpper{
overflow: auto;
...
}
</style>
整个页⾯逻辑⼤概是这样，导致页⾯没有滚动到底部就调⽤多次接⼝直到全部的原因在页⾯ warpper 标签有个 overflow: auto 样式，把它去掉问题就解决了。官⽅⽂档最底部提到了这个问题。
