一、使用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;
	
	      // 重新加载数据
	      // 将 loading 设置为 true，表示处于加载状态
	      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 使容器滚动