当前位置: 首页 > Web前端 > HTML

通过懒加载&&网站页脚自适应实现分页

时间:2023-04-03 00:17:57 HTML

最近在做手机,发现下拉刷新和上拉加载的jq控件很少,感觉不好用,比如iscroll。。。于是写了一个懒加载的,也很简单,最基础的代码【没有请不要喷,还挺实用的】wap手机上的懒加载分页:使用前先引用jquery.jsvarcurrent=1;$(function(){$('body').bind('touchmove',function(e){if($(this).scrollTop()>($(window).height()*current-150)){//这里的150表示trigger距底部150像素,current++可以自己调整;console.log("第"+current+"page");//把你的分页代码写在这里}});});if($(this).scrollTop()==0){//此为wap刷新代码,如有需要,请结合使用}网页端懒加载分页:使用前参考jquery.jsvarcurrent=1;$(function(){window.onscroll=function(){if($(document).scrollTop()>=($(document).height()-$(window).height()-150)){//150和wap移动端一样current++;//把你的分页代码放在这里}}});if($(document).scrollTop()==0){//这是网页刷新代码,请使用必要时组合}网络计算机上页脚的底部是固定的:.footer.position{position:absolute;瓶嗡:0;}$(function(){auto();window.onresize=function(){auto();}});functionauto(){if($(window).height()>917){//917可以自己调整,根据页面内容高度$(".footer").addClass("position");}else{//.position参见css$(".footer").removeClass("position");}}另一种方法[推荐]functionauto(){$("body").scrollTop(1);//控制滚动条向下移动1pxif($("body").scrollTop()>0){$(".footer").removeClass("position");alert("有一个滚动条");}else{$(".footer").addClass("位置");alert("没有滚动条");}$("body").scrollTop(0);//滚动条回到顶部}附上两张前后对比图,footer固定在底部