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);