uni-app的下拉刷新和上拉加载

uni-app的下拉刷新和上拉加载

具体都解释都有注释看代码就行

html代码

<!-- 上拉加载 -->
<view class="loadmore" v-if="showLoadMore">{{loadMoreText}}</view>

js代码

data() {
	return {
		commentList:[],  //内容
		loadMoreText:"加载中...", //上拉加载的文字内容
		showLoadMore:false,  //上拉加载的状态
		page:0,   //当前在多少页
		goods_id:''//上个页面传过来的goods_id参数
	}
},
//页面加载
onLoad:function(option){
	//将上个页面传过来的参数存在变量里面
	var goods_id = option.id;
	this.goods_id = goods_id;//将参数存在data里面的goods_id里面方便调用
	this.firstLoad();//进入页面进行首次加载
},
//生命周期函数，监听页面卸载
onUnload() {
	this.commentList = [],
	this.loadMoreText = "加载更多",
	this.showLoadMore = false;
},
onReachBottom() {//上拉加载
	console.log("上拉加载");
	//在这里我定义死了只能取三页的数据，自己传参自定义就好
	if(this.page > 3){
		this.loadMoreText = "没有更多数据了！"
		return;
	}
	this.showLoadMore = true;
	//执行上拉加载的方法
	setTimeout(() => {
		this.againLoad();
	}, 300);
},
onPullDownRefresh(){//上拉刷新方法
	console.log('下拉刷新');
	this.firstLoad();
},
methods: {
	firstLoad(goods_id){
		setTimeout(() => {
			//定义一个变量
			var me = this;
			//拿到goods_id
			var goods_id = me.goods_id;
			me.page = 0;//page定义为0
			me.commentList = [];//将内容清空
			var page = me.page += 1;//加载一次之后page+1
			//通过挂载到main.js中获取服务器的地址作为变量
			var serverUrl = me.serverUrl;
			//根据商品ID查询当前商品的评论
			uni.request({
				url: serverUrl + '/index/carousel/list?goods=' + goods_id + '&page' + page,
				method:"POST",
				success: (res) => {
					//获取真实数据之前，务必判断状态是否为200
					 if(res.data.status == 200){
						var commentList = res.data.data;//将数据赋值给一个变量
						me.commentList = commentList; //将变量赋值给this
					}
				}
			});
			uni.stopPullDownRefresh();
		}, 300);
	},
	againLoad(goods_id,page){
		//定义一个变量
		var me = this;
		var goods_id = me.goods_id;//拿到goods_id
		var page = me.page;//获取当前所在的页数
		var page = me.page = page+1;//加载下一页，所以加一，并且赋值给data里面的page
		//通过挂载到main.js中获取服务器的地址作为变量
		var serverUrl = me.serverUrl;
		//根据商品ID查询当前商品的评论
		uni.request({
			url: serverUrl + '/index/carousel/list?goods=' + goods_id + '&page=' + page,
			method:"POST",
			success: (res) => {
				//获取真实数据之前，务必判断状态是否为200
				 if(res.data.status == 200){
					var commentList = res.data.data;//将数据赋值给一个变量
					me.commentList = me.commentList.concat(commentList);//将数组追加在后面
				 }
			}
		});
	}
}