基于JavaScript实现移动端无限加载分页


Posted in Javascript onMarch 27, 2017

本文实例为大家分享了js实现移动端无限加载分页的具体代码,供大家参考,具体内容如下

原理:当滚动条到达底部时,执行下一页内容。

判断条件需要理解三个概念:
    1.scrollHeight 真实内容的高度
    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度
    3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离

思路:

    1.使用fixed定位加载框
    2.使用$(window).scroll();方法来触发是否加载
    3.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 10 ,作为加载触发的条件

代码样例

var page=1; //当前页的页码
      var flagNoData = false; //false
    var allpage; //总页码,会从后台获取
    function showAjax(page){
      $.ajax({
        url:"",
        type:"",
        data:"",
        success:function(data){
          //要执行的内容
          showContent();
            if(page>=data.allpage){ //当前页码大于等于总页码
            flagNoData = true;
            };
          page+=1;  //页数加1
        }
      })
    }
    function scrollFn(){
      //真实内容的高度
      var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
      //视窗的高度
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
      //隐藏的高度
      var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(falgNoData){ //数据全部加载完了
         return;
        }else if(pageHeight - viewportHeight - scrollHeight < 10){  //如果满足触发条件,执行
        showAjax(page);
      }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
layui实现三级导航菜单
Jul 26 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 #Javascript
JS简单实现数组去重的方法示例
Mar 27 #Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
基于JavaScript实现焦点图轮播效果
Mar 27 #Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 #Javascript
JS闭包用法实例分析
Mar 27 #Javascript
vue 2.0组件与v-model详解
Mar 27 #Javascript
You might like
php实现的后台表格分页功能示例
2017/10/23 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python检索特定内容的文本文件实例
2018/06/05 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python 简单的调用有道翻译
2020/11/25 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
保险专业自荐信范文
2014/02/20 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
财务部绩效考核方案
2014/05/04 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers