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

àì夳堔傛蜴生んèń 2021-11-23 02:52 1367阅读 0赞

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

首先要先定义数据和在上拉函数中调用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