源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-12-21 16:46:37 | 显示全部楼层 |阅读模式
本文主要介绍了wap手机端懒加载分页,web电脑端懒加载分页以及web电脑端footer底部固定。具有很好的参考价值,下面就跟着小编一起来看下吧

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

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

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-9 03:55:01 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2022-10-25 14:14:49 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2023-2-28 03:55:24 | 显示全部楼层
刷屏刷屏刷屏
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-3-4 07:54:13 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2023-4-3 00:39:09 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-29 20:09:29 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

9

主题

2万

回帖

420

积分

中级会员

Rank: 3Rank: 3

积分
420
发表于 2023-8-13 04:04:09 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-21 14:44:28 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-8-22 22:34:24 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-25 19:20 , Processed in 0.079537 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表