懒加载实现的分页&&网站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 相关文章推荐
script不刷新页面的联动前后代码
Sep 18 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
js数组的基本使用总结
Jan 18 Javascript
JavaScript前端面试组合函数
Jun 21 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php 变量定义方法
2009/06/14 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JS实现随机抽取三人
2019/11/06 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python格式化日期时间操作示例
2018/06/28 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python装饰器代替set get方法实例
2019/12/19 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python内置函数locals和globals对比
2020/04/28 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
撤诉书怎么写
2015/05/19 职场文书
《去年的树》教学反思
2016/02/18 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL