js下拉加载数据插件

一.效果图(其中未设置数据加载动画，请自行设置)

二.使用

<!--引用js-->
<script src='drop.down.ref.js'></script>
  <script>
	var count = 0;
	ref.refresh(function () {
		//自行设置数据加载动画,此处不提供
		//start animation...
		
		//模拟添加数据
		document.body.innerHTML+="<div style='color:white;height:200px;width:100%;background:#"+(count+1)*114+"'>这是第"+count+"块div</div>";
		count++;
		if (count >= 5) {
			//模拟加载最后的数据
			document.body.innerHTML+="<div style='color:white;height:200px;width:100%;background:#"+(count+1)*114+"'>这是最后一块div，方法在不触发</div>";
			
			//停止动画加载,此处不提供
			//stop animation....
			return true;
		}
		
		//停止动画加载,此处不提供
		//stop animation....
		return false;
	});
  </script>

三.插件代码

/**
 *
 * describe:  下拉加载组件
 * author:jpw
 * Date:2019/5/6
 * Time:18:25
 *
 * */
(function(window){
    window.ref={
        /**
         * 控制是否刷新
         */
        isRef:false,
        /**
         * 获取滚动条位置
         */
        getScrollTop:function() {
            if (document.documentElement && document.documentElement.scrollTop) {
              return document.documentElement.scrollTop;
            }
            if (document.body) {
                return document.body.scrollTop;
            }
        },
        /**
         * 获取当前可视范围的高度
         */
        getClientHeight:function () {
            if(document.body.clientHeight && document.documentElement.clientHeight) {
                return Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return  Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        },
        /**
         * 获取文档完整的高度
         */
        getScrollHeight:function() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        },
        /**
         * 刷新逻辑控制
         * @param fn 回调函数：用来实现下拉加载业务；
         *              通过在回调函数中返回true/false来控制是否终止触发下拉刷新
         *              通常情况下，当再无数据加载是 返回true，反之为false
         */
        refresh: function (fn){
            window.onscroll = function() {
                if((ref.getScrollTop() +ref.getClientHeight() >= ref.getScrollHeight()||ref.getScrollTop() +screen.height >= ref.getScrollHeight())&&!ref.isRef) {
                    if(typeof fn=="function"){
                        ref.isRef=fn();
                        return;
                    }
                    ref.isRef=true;
                }
            }
        }

    }
    window.ref=ref;
})(window);