您的位置：首页 > 编程技术 > js  >  懒加载实现的分页&&网站footer自适应

懒加载实现的分页&&网站footer自适应

 更新时间：2017年1月9日 10:00  点击：1688

最近在做手机端，发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用，比如iscroll之类……

然后自己写了个懒加载的，也很简单，最基础的代码【不喜勿喷，但蛮实用的】

wap手机端懒加载分页：

用之前先引用下jquery.js

var current = 1;
 $(function() {
  $('body').bind('touchmove', function(e) {
    if($(this).scrollTop() > ($(window).height() * current - 150)) {//这里的150表示距离底部150像素触发，可自行调节
    current++;
    console.log("第" + current + "页");
    //这里放你的分页代码
   }
  });
 });

if($(this).scrollTop()==0){//这是wap刷新代码，有需要请结合使用}

web电脑端懒加载分页：

用之前先引用下jquery.js

var current = 1;
  $(function() {
   window.onscroll = function() {
    if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样
     current++;
     //这里放你的分页代码
    }
   }
  });

if($(document).scrollTop()==0){//这是web刷新代码，有需要请结合使用}

web电脑端footer底部固定：

 .footer.position {
  position: absolute;
  bottom: 0;
 }
$(function() {
   auto();
   window.onresize = function() {
    auto();
   }
  });
  function auto() {
   if($(window).height() > 917) {//917可自行调整，根据页面的内容高度
    $(".footer").addClass("position");
   } else {//.position见css
    $(".footer").removeClass("position");
   }
  }

另一种方法【推荐】

function auto() {
   $("body").scrollTop(1); //控制滚动条下移1px 
   if($("body").scrollTop() > 0) {
    $(".footer").removeClass("position");
    alert("有滚动条");
   } else {
    $(".footer").addClass("position");
    alert("没有滚动条");
   }
   $("body").scrollTop(0); //滚动条返回顶部 
  }

附上两张前后对比图，footer固定底部

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

[!--infotagslink--]

相关文章

  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20

  • Angular性能优化之第三方组件和懒加载技术

    这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术，对性能优化感兴趣的同学，可以参考下...2021-05-11

  • AngularJS实现分页显示数据库信息

    这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料，感兴趣的小伙伴们可以参考一下...2016-07-06

  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08

  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据...2016-10-20

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-23

  • laypage分页控件使用实例详解

    这篇文章主要为大家详细分享了laypage分页控件使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-20

  • MySQL分页优化

    这篇文章主要为大家详细介绍了MySQL分页优化，内容思路很详细，有意对MySQL分页优化的朋友可以参考一下...2016-04-22

  • vue-router懒加载的3种方式汇总

    这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-28

  • EasyUI Pagination 分页的两种做法小结

    这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25

  • 基于BootStrap的前端分页带省略号和上下页效果

    这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下...2017-05-22

  • 编写PHP脚本来实现WordPress中评论分页的功能

    这篇文章主要介绍了编写PHP脚本来实现WordPress中评论分页的功能的方法,包括上一页下一页和导航式分页功能的添加,需要的朋友可以参考下...2015-12-14

  • 解决JS组件bootstrap table分页实现过程中遇到的问题

    这篇文章主要介绍了JS组件bootstrap table分页实现过程中遇到的问题，感兴趣的小伙伴们可以参考一下...2016-04-23

  • 使用vue.js制作分页组件

    本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件，并使用webpack打包起来，这里推荐给大家，有需要的小伙伴可以参考下...2016-07-01

  • vue实现路由懒加载的3种方法示例

    这篇文章主要给大家介绍了关于vue实现路由懒加载的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02

  • PHP MSSQL 分页实例

    这篇文章主要介绍了PHP MSSQL可刷新分页实例，以及PHP+MSSQL通用分页公式，感兴趣的小伙伴们可以参考一下...2016-04-15

  • jquery DataTable实现前后台动态分页

    本篇文章主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-06-24

  • jQuery实现的分页功能示例

    这篇文章主要介绍了jQuery实现的分页功能,结合实例形式较为详细的分析了jQuery实现分页功能的具体步骤及相关操作技巧,包括前台样式、布局及jQuery分页插件的调用方法,需要的朋友可以参考下...2017-01-26

  • yii2分页之实现跳转到具体某页的实例代码

    这篇文章主要介绍了yii2分页之实现跳转到具体某页的实例代码的相关资料,需要的朋友可以参考下...2016-06-12

  • js 图片懒加载的实现

    这篇文章主要介绍了js 图片懒加载的实现，帮助大家更好的优化自身网页，提高网页响应速度，感兴趣的朋友可以了解下...2020-10-21