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>