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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php 文件缓存函数
2011/10/08 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
用python写的一个wordpress的采集程序
2016/02/27 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python自省及反射原理实例详解
2020/07/06 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
创建绿色学校先进个人材料
2014/08/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
考试作弊检讨书
2014/10/21 职场文书
群众路线调研报告范文
2014/11/03 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python