首页 > 编程 > JavaScript > 正文

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

2019-11-19 16:31:42
字体:
来源:转载
供稿:网友

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

<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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表