移动端的滚动加载
随着WebApp越来越火，相关的移动端的方法也越来越常用。下面主要介绍我在项目中解决的关于加载数据的方法。
滚动加载的原理：1，初始化数据，例如最初的数据有五条；2，启动滚动加载方法；3，根据页面的最后一条数据加载接下来的数据。当然这需要后台数据接口的结合。后台接口根据数据的id进行该数据下五条数据的查询。
代码如下：
1 var ct_id=1;//初始化数据 2 ajaxfollowList();//去后台查询相关数据 3 //滚动加载事件 4 $(window).scroll(function(){ 5 var scrollTop = $(this).scrollTop(); 6 var scrollHeight = $(document).height(); 7 var windowHeight = $(this).height(); 8 9 if(scrollTop + windowHeight >= scrollHeight){ 10 ajaxfollowList();//后台查询数据 11 } 12 13 }); 14 // 后台接口加载数据函数 15 function ajaxfollowList(){ 16 17 var url = '/index.php/WxSys/StaffUser/ajax_order/ct_id/'+ct_id;//后台接口 18 $.ajax({ 19 type:"get", 20 url:url, //接口 21 success:function(data) { 22 23 var html = ''; 24 25 if(data.task.length > 0){ 26 //获取所见页面的最后一条数据的id 27 var length = data.task.length-1; 28 ct_id = data.task[length].ct_id; 29 30 31 for(var i=0;i<data.task.length;i++){ 32 33 html += "<div class='content_contain' task-id='"+data.task[i].ct_id+"'>"; 34 html += "<div class='content_line'>"; 35 html += "<span>"+ data.task[i].ctt_type_name +"</span>"; 36 html += "<span style='text-align:center;'>"+ data.task[i].ct_dispatch_date +"</span>"; 37 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>"; 38 html += "</div>"; 39 html += "<h3 style='font-size:0.3rem;margin-top:0.1rem;'>谢伟强<span style='font-size:0.26rem;'>（13602780741）</span></h3>" 40 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>"; 41 html += "<h6 style='font-size:0.26rem;'>"+ data.task[i].ct_task_content +"</h6>"; 42 43 44 if(data.task[i].images){ 45 for(var j=0;j<data.task[i].images.length;j++){ 46 html += "<ul class='content_line_img'>"; 47 html += "<li><img src='/Uploads/"+ data.task[i].images[j] +"'></li>"; 48 html += "</ul>"; 49 } 50 51 } 52 53 html += "</div>"; 54 html +="<div class='interval'></div>"; 55 56 } 57 58 $(".tab_a").append(html);//查询到的数据进行页面上的布置 59 60 61 62 }else{ 63 html += "<div class='empty'>"; 64 html += "<img src='/Public/weChat/css/images/empty/no_repaired.png'>"; 65 html += "<p>暂无工单任务</p>"; 66 html += "</div>"; 67 68 $(".tab_a").append(html); 69 } 70 } 71 72 }); 73 }
