基于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 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 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 date()日期时间函数详解
2010/05/16 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
mui back 返回刷新页面的实例
2017/12/06 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
用Python实现协同过滤的教程
2015/04/08 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python生成器generator原理及用法解析
2020/07/20 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
体育教育专业自荐信范文
2013/12/20 职场文书
保安岗位职责
2014/02/21 职场文书
超市开店计划书
2014/04/26 职场文书
银行贷款收入证明
2014/10/17 职场文书
安全生产协议书
2016/03/22 职场文书