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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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 清除网页病毒的方法
2008/12/05 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP中比较时间大小实例
2014/08/21 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python3实现windows下同名进程监控
2018/06/21 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
情侣吵架检讨书
2014/02/05 职场文书
六查六看自查材料
2014/02/17 职场文书
法制宣传月活动方案
2014/05/11 职场文书
科技节口号
2014/06/19 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python