最近看list加载问题看了好久,也想了很多方法,最后自己又写了一个小demo,你们可以试一下
<template>
<div class="home">
<van-tabs v-model="active" @change="change">
<van-tab title="标签 1"></van-tab>
<van-tab title="标签 2"></van-tab>
</van-tabs>
<van-list
ref="listout"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "HomeView",
components: {
HelloWorld,
},
data() {
return {
active: 0,
list: [],
loading: false,
finished: false,
};
},
methods: {
change(value) {
console.log(value);
this.list = [];
this.finished = false;
// if (this.finished === true) {
// this.finished = false;
// } else {
// this.queryData();
// }
},
onLoad() {
this.queryData();
},
queryData() {
// 异步更新数据
setTimeout(() => {
//十个并没有铺满整个屏幕--换成20铺满整个屏幕效果一样
console.log("发送了数据请求" + this.active);
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 60) {
this.finished = true;
}
}, 500);
},
},
};
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: calc(100% - 78px);
overflow-y: auto; //这一句很重要
}
</style>
如果还有问题,可以试试我methods注释的if判断,注意vant是可以自动检测触底的,如果想要关掉使用immediate-check设为false
第二种方式(不推荐)就比较考验数据的加载量,比如下边的20改成15就不足以撑起盒子
<template>
<div class="home">
<van-tabs v-model="active" @change="change">
<van-tab title="标签 1"></van-tab>
<van-tab title="标签 2"></van-tab>
</van-tabs>
<van-list
ref="listout"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:immediate-check="false"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "HomeView",
components: {
HelloWorld,
},
data() {
return {
active: 0,
list: [],
loading: false,
finished: false,
};
},
created() {
this.onLoad();
},
methods: {
change(value) {
console.log(value);
this.list = [];
this.finished = false;
this.queryData();
// if (this.finished === true) {
// this.finished = false;
// } else {
// this.queryData();
// }
},
onLoad() {
this.queryData();
},
queryData() {
// 异步更新数据
setTimeout(() => {
console.log("发送了数据请求" + this.active);
for (let i = 0; i < 20; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
},
},
};
</script>
<style lang="less" scoped>
.home {
width: 100%;
// height: calc(100vh - 78px);
// overflow-y: auto;
}
</style>