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，再那获取到的数据拼接到已经存在的数组中，从而达到数据的同时刷新。