一、使用vant的下拉刷新和上拉加载
<div class="parent-container">
<div class="list-container" res="listContainer" @scroll="onScroll">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
</div>
</div>
<script>
export defalut {
data(){
return {
scrollTop: 0,
list: [],
loading: false,
finished: false,
refreshing: false,
}
},
activate(){
this.$nextTick(res => {
this.$refs.listContainer.scrollTop = this.scrollTop
})
},
methods:{
onScroll(e){
this.scrollTop = e.target.scrollTop
},
onLoad() {
setTimeout(() => {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
onRefresh() {
this.finished = false;
this.loading = true;
this.onLoad();
},
}
}
</script>
<style>
.parent-container{
display: flex;
flex-direction: colume;
}
.list-container{
flex: 1;
overflow: auto
}
</style>
二、外层容器必须固定高度,并且添加overflow: auto
,那么如何最好的让容器固定高度呢?!!!
使用flex布局,给容器的父容器设置 display:flex
列表的容器设置 flex: 1 就会自动填满容器的高度,并且还可以通过添加 overflow: auto 使容器滚动