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


Posted in Javascript onDecember 21, 2016

最近在做手机端,发现下拉刷新和上拉加载的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固定底部

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 #Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 #Javascript
详解jQuery选择器
Dec 21 #Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
js实现可输入可选择的select下拉框
Dec 21 #Javascript
详解handlebars+require基本使用方法
Dec 21 #Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
You might like
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
js的一些常用方法小结
2011/06/29 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python config文件的读写操作示例
2019/09/27 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
大学自荐信
2013/12/12 职场文书
出纳员岗位责任制
2014/02/11 职场文书
房地产项目建议书
2014/03/12 职场文书
抽样调查项目计划书
2014/04/24 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
先进党组织事迹材料
2014/12/26 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
nginx结合openssl实现https的方法
2021/07/25 Servers
Oracle 触发器trigger使用案例
2022/02/24 Oracle