最近在做手机端,发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用,比如iscroll之类……
然后自己写了个懒加载的,也很简单,最基础的代码【不喜勿喷,但蛮实用的】
wap手机端懒加载分页:
用之前先引用下jquery.js
1 var current = 1; 2 $(function() { 3 $('body').bind('touchmove', function(e) { 4 if($(this).scrollTop() > ($(window).height() * current - 150)) {//这里的150表示距离底部150像素触发,可自行调节 5 current++; 6 console.log("第" + current + "页"); 7 //这里放你的分页代码 8 } 9 }); 10 });
if($(this).scrollTop()==0){//这是wap刷新代码,有需要请结合使用}
web电脑端懒加载分页:
用之前先引用下jquery.js
1 var current = 1; 2 $(function() { 3 window.onscroll = function() { 4 if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样 5 current++; 6 //这里放你的分页代码 7 } 8 } 9 });
if($(document).scrollTop()==0){//这是web刷新代码,有需要请结合使用}
web电脑端footer底部固定:
1 .footer.position { 2 position: absolute; 3 bottom: 0; 4 }
1 $(function() { 2 auto(); 3 window.onresize = function() { 4 auto(); 5 } 6 }); 7 8 function auto() { 9 if($(window).height() > 917) {//917可自行调整,根据页面的内容高度 10 $(".footer").addClass("position"); 11 } else {//.position见css 12 $(".footer").removeClass("position"); 13 } 14 }
另一种方法【推荐】
1 function auto() { 2 $("body").scrollTop(1); //控制滚动条下移1px 3 if($("body").scrollTop() > 0) { 4 $(".footer").removeClass("position"); 5 alert("有滚动条"); 6 } else { 7 $(".footer").addClass("position"); 8 alert("没有滚动条"); 9 } 10 $("body").scrollTop(0); //滚动条返回顶部 11 }
附上两张前后对比图,footer固定底部