jQuery滑动到底部加载下一页数据的实例代码


Posted in jQuery onMay 22, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>page_num =page_num+1 ; //页码自动增加,保证下次调用时为新的一页。
      $.ajax({
        type: "get",  
        url: rent_url, 
        data: '2',
        dataType: "json",
        success: function (data) {
//          查询到的数据总数
          rentDataNum = data.count
//         每页加载6个 需要加载的页数 
          rentDataPagge = Math.ceil(rentDataNum/6);
          $(".loaddiv").hide();
//         返回信息的长度 大于0 则调用函数 把加载的数据通过html的形式 追加到视图中 
          if (data.houses.length > 0) {
            insertDiv(data.houses,rentDataPagge,pagenumber);
          }
        },
        beforeSend: function () {
          $(".loaddiv").show();
        },
        error: function (data) {
          $(".loaddiv").hide();
        }
      });
    }
    //初始化加载第一页数据
      getData(1);
    //生成数据html,append到div中
    function insertDiv(data,page_num,pagenumber) {
      var $mainDiv = $(".er_list");
      var result = '';
      if (pagenumber<=page_num){
        for (var i = 0; i < data.length; i++) {
          var houe_title   =  data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name;
          result +='<li>';
          result +='<a href="#" rel="external nofollow" >'
          result +='<div class="img_left"><img src='+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+'></div>'
          result +='<div class="img_con">'
          result +='<h5>'+houe_title+'</h5>'
          result +='<p class="ting">'+data[i].bedroom+' 室'+ data[i].livingroom+' 厅1卫<span>·</span>'+data[i].buildarea+' ?<span>·</span>东南</p>'
          result +='<p class="info">'+data[i].district_name+'</p>'
          result +='<p class="tag">'
          result +='<em class="yell_01">不限购</em><em class="yell_02">近地铁</em><em class="yell_03">满两年</em><em class="yell_04">满两年</em>'
          result +='</p>'
          result +='<div class="jia"><p>'+data[i].price+' </p><span>123 /?</span></div>'
          result +='</div>'
          result +='</a>'
          result +='</li>';
        }
        $mainDiv.append(result);
        // 如果加载完数据则 删除等待加载时的图片
        if (pagenumber==page_num){
          $("div").remove('#loadings')
        }
      }
    }
    //==============核心代码=============
    var winH = $(window).height(); //页面可视区域高度
    var scrollHandler = function () {
      var pageH = $(document.body).height();
      var scrollT = $(window).scrollTop(); //滚动条top
      var aa = (pageH - winH - scrollT) / winH;
      if (aa < 0.02) {//0.02是个参数
        // 避免加载万书记 不停调用函数 进行的加载
        if (page_num<=rentDataPagge+1){
          // 滑动到地部 调用函数 加载数据
          getData(page_num);
        }
      }
    }
    //定义鼠标滚动事件
    $(window).scroll(scrollHandler);
    //==============核心代码=============
    //继续加载按钮事件
    $("#btn_Page").click(function () {
      getData(page_num);
      $(window).scroll(scrollHandler);
    });
  });
  </script>
jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
You might like
PHP出错界面
2006/10/09 PHP
PHP输出日历表代码实例
2015/03/27 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python实现的简单猜数字游戏
2015/04/04 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python异常的检测和处理方法
2018/10/26 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python实现移动木板小游戏
2020/10/09 Python
python搜索算法原理及实例讲解
2020/11/18 Python
一个入门级python爬虫教程详解
2021/01/27 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
实习生单位鉴定意见
2013/12/04 职场文书
初二政治教学反思
2014/01/12 职场文书
六个一活动实施方案
2014/03/21 职场文书
教师节慰问信
2015/02/15 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript