小程序实现滚动加载分页处理

如何实现小程序的滚动加载

在商城的开发过程中。后台不可能一次返回所有数据给我们。这时候我们需要进行分页请求，也就是常说的滚动加载功能。

使用小程序页面中的onReachBottom钩子函数

在小程序的app.json中配置window对象中onReachBottomDistance，表示距离底部多少px执行滚动逻辑。这种方式适合于全屏滚动的业务场景

 <view wx:for ="{{userList}}">
   <text>{{item.name}}</text>
   <text>{{item.age}}</text>
 </view>

使用scroll-view组件进行滚动加载

当页面分为多个区块。而滚动区域的高度不是全屏滚动的时候我们可以使用小程序为我们定制的scroll-view组件进行代码开发。具体内容可以参考:小程序组件文档.

scroll-view组件代码如下:

 <view class="tab">
   <view>内容一</view>
   <view>内容二</view>
  </view>
	<scroll-view  style ="height:{{warpHeight}};" scroll-y ="true" bindscrolltolower="loadMore" class='deviceScroll' >
	<view>
     <!-- 内容区域 -->
   </view>
	</scroll-view>

我们设置可以垂直滚动并且设置滚动的回调函数为loadMore，这里为了兼容不同手机的需要动态获取scroll-view区域的高度。需要借助小程序声明周期的onLoad函数进行高度的初始化，话不多说上代码。

var wxApi = require("../../apis/wxApi.js"); //这里我封装了获取系统信息的函数下面进行讲解
var common = require("../../common/common.js"); //这里只用到了类似alert的弹出提示
Page({
  data:{
        ...  //无关代码略
        warpHeight:"" //初始高度置空
  },
  onLoad:function()
  {
      	 //初始化滚动区域高度
  	   var self = this;
     	wxApi.listApi.getSystemInfo(function(res) {
     	//其中res.windowHeight 则是整个区域的高度，144是class为tab切换按钮的高度
     	//因为这里的高度是以px为单位。所以我们需要进行像素比的转换以便可以兼容不同型号的手机
     	//这里用或表示如果系统获取成功了但是处于延时的情况。我们可以给他一个默认的高度为560
			var warpHeight = (res.windowHeight - Math.ceil(144 / res.pixelRatio) || 560) + "px";
			self.setData({
				warpHeight: warpHeight
			})
		}, function(er) {
		//错误时候抛出错误同时初始化高度为默认高度
			common.messageBox.showModal("获取系统信息失败");
				self.setData({
				warpHeight: "560px"
			})
		});
  },
  loadUserList:function()
  { 
    //次要代码略。。。
  },
  loadMore:function()
  {
     //页面触底执行分页逻辑
     this.loadUserList();
  }
})

当上述代码执行成功后：iphone5和iphone6下面对应scroll-view高度分别如下：


在页面中我们使用了wxApi 这个库中的获取系统信息的方法。代码如下：

let wxCommon = {}; //定义全局域为wx全局
wxCommon.listApi = {};  //初始化wx全局api
//挂载获取系统属性api
wxCommon.listApi.getSystemInfo = function(suc,fail)
{
	    var res = wx.getSystemInfoSync();
	    if(res && typeof(res) ==="object")
	    {
	    	 suc(res);
	    }
	    else{
	    	 fail(res);
	    }
}

得到的信息结果如下：

写在最后

 小程序做分页处理的时候，比其他pc或是移动端都要相对的容易一些。合理的运用小程序给我们的轮子。会使我们的开发更加的得心应手。