基于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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
js命名空间写法示例
Dec 18 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
深入探究node之Transform
Jul 20 Javascript
详解vue axios中文文档
Sep 12 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python判断字符串是否纯数字的方法
2014/11/19 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
Ajax的工作原理
2015/12/04 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android