基于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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
js实现数字滚动特效
Dec 16 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
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动态变量定义及使用
2015/06/10 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python实现自动访问网页的例子
2020/02/21 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
迎元旦广播稿
2014/02/22 职场文书
人大代表选举标语
2014/10/07 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2016春节放假通知范文
2015/08/18 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Python之matplotlib绘制折线图
2022/04/13 Python