实现移动端页面滚动加载更多

2018-03-03

PC页面用分页，移动端页面滚动加载更多数据在日常的开发中经常会用到，而JS实现起来也很简单。下面就来说下移动滚动加载更多的解决方案

先说下移动端滚动加载更多数据的原理：

其请求数据的原理与PC端分页是一样的，改变页码，发送请求，再将数据渲染到页面上。

而移动页面发送请求的位置要根据滚动的位置来计算，当滚动的高度+屏幕可见高度>页面的高度时，发送请求，同时将数据拿到，追加的页面上

这里也有要注意的地方，需要设置一个开关来控制是否请求数据，否则会不停发送请求，还有要判断是否加载完毕更多数据，如果加载完则不要继续请求

代码实现

var sw = true   (设置开关控制是否发送请求)

window.onscroll = function(){
    (获取滚动的高度，这里写的两种方法是为浏览器做兼容处理)
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop

    (获取可视高度，如果只是在某个区域，可以自行获取)
    var screenH = document.documentElement.clientHeight

    (获取整个页面高度)
    var bodyH = document.body.clientHeight
    
    (判断开关是否为true，判断滚动高度+可见高度是否>页面高度，判断是否加载完毕)
    if(sw && (scrollH + screenH > bodyH) && currentPage < totalPage){ 
        sw = false (将开关关闭)
        currentPage +=1 (设置请求下一部分数据的参数)
        ajaxFn() (发送请求的方法)
    }
}

在发送请求的方法中，获取完数据后，设置开关为true
function ajaxFn(){
    /*ajax方法*/
    sw = true
}

以上为整体的原理，其它的一些效果，则根据项目的需要再进行修改。