jQuery實現(xiàn)下拉加載功能實例代碼
來源:易賢網 閱讀:1230 次 日期:2016-07-08 16:07:52
溫馨提示:易賢網小編為您整理了“jQuery實現(xiàn)下拉加載功能實例代碼”,方便廣大網友查閱!

本文通過一段實例代碼給大家介紹jquery實現(xiàn)下拉加載功能,代碼簡單易懂,需要的朋友參考下吧

直接給大家貼代碼了,具體代碼如下所示:

<script>

var str = '';

if(page=="") page=1;

var stop=true;//觸發(fā)開關,防止多次調用事件

$(window).scroll( function(event){

//當內容滾動到底部時加載新的內容 100當距離最底部100個像素時開始加載.

if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {

//if(stop==true){

//stop=false;

//var canshu="page/"+page+";

var url = "";

var parm = {'page':page};

page=page+1;//當前要加載的頁碼

//加載提示信息

$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");

$.post(url,parm,function(data){

if( data.count == 0 ) {

$('.prolist-abtn').html('已全部加載完');

return;

}

$.each(eval(data), function(data, val) {

var url1 = "";

$(".ajaxtips").hide();

str = '<div class="content" id="showdiv">';

str +='<div class="cont clearfix">';

str +='<a href="url"><div class="cont_img fl">';

str +='<img src='+val.imgurl+' alt="" /></div>';

str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';

str += '<li class="cont_list2"><span>¥</span>';

str +='<strong>'+val.sellerprice+'</strong>起<i>¥'+val.sellerprice+'</i></li>';

str +='</ul></div></a></div></div>';

$("#showdiv").append(str);//把新的內容加載到內容的后面

});

stop=true;

},'JSON')

}

});

</script>

以上代碼是小編給大家分享的jQuery實現(xiàn)下拉加載功能實例代碼,希望對大家有所幫助!

更多信息請查看網絡編程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網