6.vue用vant做出下拉刷新 上拉加载

List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新 上拉加载的效果

1.引用组件
List 列表 PullRefresh 下拉刷新

import { PullRefresh , List } from 'vant'

export default {
	name: 'index',
	components: {
		[PullRefresh.name]: PullRefresh,
		[List.name]: List
	},

2.将html代码复制过来

<!-- 下拉刷新 -->
<van-pull-refresh class="van-pull-refresh" v-model="isLoading" @refresh="onRefresh">
	<!-- 上拉加载 -->
	<van-list 
		class="van-list" 
		v-model="loading" 
		:finished="finished" 
		finished-text="没有更多了" 
		:error.sync="error" 
		error-text="请求失败，点击重新加载" 
		@load="upload">
		
		<div>
			当前页面的内容写在这里
		</div>		
				
	</van-list>
</van-pull-refresh>

3.在data中定义需要的

data() {
     return {
		indexList:[],//当前页面的内容
		page:0,//当前所在页数
		pages:0,//总页数
		isLoading: false,//下拉刷新
		loading: false,//上拉加载
		finished: false,//没有内容后的状态
		error: false,//错误状态
     };
},

4.js的逻辑代码

methods: {
	//下拉刷新
	onRefresh() {
		var me = this;
		var page = 1;//从第一页开始
		this.page = page;//将当前页数赋值给this
		me.finished = false;//将没有更多的状态改成false
		me.isLoading = true;//将下拉刷新状态改为true开始刷新
		this.$ajax.post(
			'http://xxxx.xxxx.com/api/v1/index/index/index',
			this.$qs.stringify({
				page:page
			})
		)
		.then(function(res){
			if(res.status == 200){
				me.indexList = res.data;//将内容赋值上去
				me.pages = res.page;//将总页数赋值上去
				setTimeout(() => {
					Toast('刷新成功');
					me.isLoading = false;//刷新成功后将状态关掉
				}, 1000);//1秒后关闭
			}
		})
		.catch(function(res){
			Toast('网络繁忙,请稍后再试~');	
		});
	},
	//上拉加载
	upload() {
		var me = this;
		var page = me.page;//获取当期页数
		page = page + 1;//将当前页数加1
		me.page = page;//将增加后的页数赋值给this
		this.refreshing = false;//将下拉刷新停止
		//发送ajax请求
		this.$ajax.post(
			'http://xxx.xxxx.com/api/v1/index/index/index',
			this.$qs.stringify({
				page:page
			})
		)
		.then(function(res){
			// 判断当前页数是否超过总页数或者等于总页数
			if(page < res.page || page == res.page){
				if(res.status == 200){
					var indexList = res.data;//将请求到的内容赋值给一个变量
					me.indexList = me.indexList.concat(indexList);//将请求的数据追加到后面
					me.pages = res.page;//将总页数赋值给this
					setTimeout(() => {
						// 加载状态结束
						me.loading = false;	
					}, 1000);
				}else{
					me.loading = false;//将加载状态关掉
					me.error = true;//大家错误状态
				}
			}else{
				me.finished = true;//如果超过总页数就显示没有更多内容了
			}
			
		})
		.catch(function(res){
			Toast('网络繁忙,请稍后再试~');
		});
	}
}