이 글은 주로 다음 페이지의 데이터를 로드하기 위해 하단으로 슬라이딩하는 jQuery의 예제 코드를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
더 이상 말도 안되는 코드를 게시하겠습니다. 구체적인 코드는 다음과 같습니다.
<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); $(".loadp").hide(); // 返回信息的长度 大于0 则调用函数 把加载的数据通过html的形式 追加到视图中 if (data.houses.length > 0) { insertp(data.houses,rentDataPagge,pagenumber); } }, beforeSend: function () { $(".loadp").show(); }, error: function (data) { $(".loadp").hide(); } }); } //初始化加载第一页数据 getData(1); //生成数据html,append到p中 function insertp(data,page_num,pagenumber) { var $mainp = $(".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 +='<p class="img_left"><img src='+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+'></p>' result +='<p 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 +='<p class="jia"><p>'+data[i].price+' </p><span>123 /㎡</span></p>' result +='</p>' result +='</a>' result +='</li>'; } $mainp.append(result); // 如果加载完数据则 删除等待加载时的图片 if (pagenumber==page_num){ $("p").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 로딩 단일 파일 vue 컴포넌트 방식 공유
위 내용은 jQuery를 맨 아래로 밀어 데이터 예제 설명의 다음 페이지를 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!