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 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
css图片自适应大小
2007/11/28 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
实例解析Array和String方法
2016/12/14 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
详解vue+css3做交互特效的方法
2017/11/20 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
对Python信号处理模块signal详解
2019/01/09 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
大学生创业策划书
2014/02/02 职场文书
公司活动方案范文
2014/03/06 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
综治目标管理责任书
2015/05/11 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书