移動端的滾動加載

隨着WebApp越來越火，相關的移動端的方法也越來越常用。下面主要介紹我在項目中解決的關於加載數據的方法。

滾動加載的原理：1，初始化數據，例如最初的數據有五條；2，啟動滾動加載方法；3，根據頁面的最后一條數據加載接下來的數據。當然這需要后台數據接口的結合。后台接口根據數據的id進行該數據下五條數據的查詢。

代碼如下：

 

var ct_id=1;//初始化數據
ajaxfollowList();//去后台查詢相關數據
//滾動加載事件
$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop(); 
　　var scrollHeight = $(document).height(); 
　　var windowHeight = $(this).height(); 

if(scrollTop + windowHeight >= scrollHeight){ 
ajaxfollowList();//后台查詢數據
}

}); 
// 后台接口加載數據函數
function ajaxfollowList(){

var url = '/index.php/WxSys/StaffUser/ajax_order/ct_id/'+ct_id;//后台接口
$.ajax({
type:"get",
url:url, //接口
success:function(data) {

var html = '';

if(data.task.length > 0){
//獲取所見頁面的最后一條數據的id
var length = data.task.length-1;
ct_id = data.task[length].ct_id;


for(var i=0;i<data.task.length;i++){

html += "<div class='content_contain' task-id='"+data.task[i].ct_id+"'>";
html += "<div class='content_line'>";
html += "<span>"+ data.task[i].ctt_type_name +"</span>";
html += "<span style='text-align:center;'>"+ data.task[i].ct_dispatch_date +"</span>";
html += "<span style='text-align:center;color:#fff;background-image:url({$Think.const.WECHAT_URL}css/images/waitingProcess.png);background-size:70% 100%;background-repeat:no-repeat;background-position:center;padding-left:0.3rem;padding-right:0.3rem;'>"+ data.task[i].status +"</span>";
html += "</div>";
html += "<h3 style='font-size:0.3rem;margin-top:0.1rem;'>謝偉強<span style='font-size:0.26rem;'>（13602780741）</span></h3>"
html += "<h3 style='font-size:0.3rem;color:#151515;margin-top:0.1rem;'>"+ data.task[i].un_bldg_name +"棟"+ data.task[i].un_fl_name +"樓"+ data.task[i].un_name +"單元</h3>";
html += "<h6 style='font-size:0.26rem;'>"+ data.task[i].ct_task_content +"</h6>";


if(data.task[i].images){
for(var j=0;j<data.task[i].images.length;j++){
html += "<ul class='content_line_img'>";
html += "<li><img src='/Uploads/"+ data.task[i].images[j] +"'></li>";
html += "</ul>";
}

}

html += "</div>";
html +="<div class='interval'></div>";

}

$(".tab_a").append(html);//查詢到的數據進行頁面上的布置

 

}else{
html += "<div class='empty'>";
html += "<img src='/Public/weChat/css/images/empty/no_repaired.png'>";
html += "<p>暫無工單任務</p>";
html += "</div>";

$(".tab_a").append(html);
}
}

}); 
}