简单实现移动端上拉加载功能

最近项目需要用到移动端分页，所以简单实现了一个上拉加载的功能，默认加载第一页，每次上拉页码自加1。直到加载完所有数据。使用css3动画的加载条进行缓冲，定时器用来防止用户短时间多次请求分页接口造成的阻塞。具体的代码如下：

var loadmore = {};
//获取滚动条当前位置
function getScrollTop(){
    var scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop){
        scrollTop = document.documentElement.scrollTop;
    }else if(document.body){
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}

//获取当前可视范围的高度
function getClientHeight(){
    var clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight){
        clientHeight = Math.min(document.body.clientHeight,document.documentElement.clientHeight);
    }else{
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}

//获取文档完整的高度
function getScrollHeight(){
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

//初始化加载条
function initLoadingBar(target){
    if($('.spinner').length){
        $('.spinner').remove();
    }
    var $loading = $('<div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>');
    target.append($loading);
}

loadmore.init = function(loadData,currentPage,target){
    loadData(currentPage);  //默认加载第一页
    var timer = null;
    $(window).scroll(function(){
        if(getScrollTop() + getClientHeight() == getScrollHeight()){
            console.log('到底部了！！');
            initLoadingBar(target);
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout(function(){
                currentPage++;
                loadData(currentPage);
            },2000);
        }
    });
    
}

module.exports = loadmore;

loadmore的初始化接受三个参数，请求函数loadData,当前页码currentPage和加载条的容器target

调用的代码如下：

import '../../common/css/reset.css'
import '../../common/css/loading.css'
import api from '../../../api/api.js'
import $ from 'expose-loader?!jquery'
import loadmore from '../../common/js/lib/loadmore.js'
var currentPage = 1; //默认展示第一页的数据

function loadData(currentPage){
    console.log(currentPage);
    $.ajax({
            //请求接口数据 参数传入currentpage
    });
}

loadmore.init(loadData,currentPage,$('.list')); //初始化loadmore

另附上loading.css的样式代码

/*
** 加载效果动画
*/

.spinner {
  margin: 100px auto 0;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  height: .3rem;
  line-height: .3rem;
}
 
.spinner > div {
  width: .1rem;
  height: .1rem;
  background-color: #67CF22;
  margin-left: .05rem;
  margin-right: .05rem;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

总结

实现的东西还是比较简单的，但是较为实用，比较重要的点就是要考虑到用户可能恶意多次短时间滑动到底部来请求数据，最后是通过定时器去解决。还有就是数据加载完如何去处理的问题，如果后台有返回总共的条数，可以在取数据前把现有的数量与总数做比较，如果相等的话就不执行loadmore，这样也免去展示加载条动画和请求数据了。