js实现上拉加载

js实现匹配pc端/移动端上拉加载

今天实现了一个PC端和移动端上拉刷新效果，就当做笔记先记一下，但如果能帮到哪位同学我也挺开心的～(￣▽￣～)~

upLoad.js 代码片.

function upLoadFun(fun){
    // 判断是pc端还是移动端
    function judge(fun){
        var res,judgeFlag=0;
        window.onresize=()=>{//浏览器重置大小事件
            judgeFlag=1;
            var val = /.*Windows.*/ig;
            // console.log(navigator.userAgent);
            var str = navigator.userAgent;
            // console.log("val",val.test(str));
            res = val.test(str);
            fun(res) 
        }
        if(judgeFlag==0){
            var val = /.*Windows.*/ig;
            // console.log(navigator.userAgent);
            var str = navigator.userAgent;
            // console.log("val",val.test(str));
            res = val.test(str);
            fun(res) 
        }
    
    }
    var scrollFun = function(){
        // console.log("1",window.innerHeight,document.documentElement.clientHeight)//--屏幕高度
        // console.log("2",window.pageYOffset,document.body.scrollTop)//--可滚动高度
        // console.log("3",document.documentElement.scrollHeight,document.body.scrollHeight)//--整个页面高度
        // 屏幕高度 + 可滚动高度 >= 整个页面高度 --
        if(window.innerHeight+window.pageYOffset>=document.body.scrollHeight){
            console.log("别惹我，我可是有底线的，哼~")
            fun();
        }
    }
    judge((res)=>{
		// touchstart touchmove touchend  ---移动端的触摸事件 ：开始触碰，滑动中，触碰结束
        console.log(res)
        if(res){
            window.removeEventListener("touchend",scrollFun, false);//删除追加事件
            window.addEventListener("scroll",scrollFun,false);//追加事件
        
        }else{
            window.removeEventListener("scroll",scrollFun, false);//删除追加事件
            window.addEventListener("touchend",scrollFun,false);//追加事件
        }
    })

}

upLoad.html 里调用.

	<script>
        var cnt =0,arr=[];
        upLoadFun(()=>{
            // 要加载的内容
            arr.push(cnt++);
        });
    </script>