uni-app上拉页面加载数据，实现分页效果

实现分页效果是为了在上拉数据的时候逐渐加载下一页面的数据，这样就不会造成数据加载太多造成的页面显示过慢的问题，可以在一定成的上优化界面。

首先要先定义数据和在上拉函数中调用this，代码如下：

var _self,
page = 1;

然后也要在数据data中加入所要提示页面的消息，代码如下：

loadingType: 0,
contentText: {
    contentdown: "上拉显示更多",
    contentrefresh: "正在加载...",
    contentnomore: "没有更多数据了"
},

此外还要再模板中添加提示消息的html代码:

<text class="loading-text">
  {{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
</text>

提示消息的代码是要展示再要显示的数据最下方，其中包括“下拉加载数据，没有等多数据”等，

如果是进入到页面就默认加载数据，需要在Onload中直接加载数据，这时候加载数据的代码如下：

Onload中代码:

// 产品列表数据默认加载	
_self = this;
this.getNewsList();

获取数据的方法：

methods: {
  // 产品列表数据
  getNewsList: function() {//第一次回去数据
    _self.loadingType = 0;
    uni.showNavigationBarLoading();
    uni.request({
	  url: 'api地址',
	  method:'POST',
	  data:{
		//请求参数
	  },
	  success: function(res) {
	    console.log(res.data.data)
		_self.hotRecommendlist = res.data.data.response;
		if(res.data.data.totalcount==res.data.data.response.length){
			uni.showToast({
				title: '已是最新',
				duration: 2000
			});
		}
		uni.hideNavigationBarLoading();//关闭加载动画
		uni.stopPullDownRefresh();//得到数据后停止下拉刷新
	  }
     });

  },
}

上拉加载和下拉刷新数据的代码如下：

// 下拉刷新
onPullDownRefresh() {
	this.getNewsList();
},
// 上拉加载
onReachBottom: function() {
	page++;//每触底一次 page +1
	// console.log(_self.hotRecommendlist.length);
	if (_self.loadingType != 0) {//loadingType!=0;直接返回
		return false;
	}
	_self.loadingType = 1;
	// console.log(page);
	uni.showNavigationBarLoading();//显示加载动画
	uni.request({
		url:'地址',
		method:'POST',
		data:{
			"trandate":1534730538050,
			"requestinfo":{
			    "riskkind": "", //产品类型
				"hot": "Y", //是否热点 Y/N
				"iscommend":"",//是否推荐 Y/N
				"productname":"",//产品名称
				"suppliername":"",//保险公司名称
				"channeltype":"",//渠道
				"ispublish":"Y",//是否上架 Y/N
				"productcode":"",//产品编码
				"start_date":"",//查询产品区间开始时间 
				"end_date":"",//查询产品区间结束时间
				"pageno":page,    //页码，整数大于0，必填
				"pagesize":1 //每页显示条数，整数大于0必填
			}
		},
		success: function(res) {
			if (_self.hotRecommendlist.length==res.data.data.totalcount) {//没有数据
				_self.loadingType = 2;
				uni.hideNavigationBarLoading();//关闭加载动画
				return false;
			}
			for(var i=_self.hotRecommendlist.length;i<res.data.data.totalcount;i++){
				_self.hotRecommendlist = _self.hotRecommendlist.concat(res.data.data.response[i-1]);//将数据拼接在一起
			}
			_self.loadingType = 0;//将loadingType归0重置
			uni.hideNavigationBarLoading();//关闭加载动画
					
		}
	});
},

其实根本原理就是上拉列表的时候，page页码就会自动+1，再那获取到的数据拼接到已经存在的数组中，从而达到数据的同时刷新。

有些人想要源码地址如下：

链接：https://pan.baidu.com/s/1be3I2LxYiIV4pLg0_7pfMw 
提取码：q6w3