1、编写UI
2、编写调用代码先默认显示15条，你也可以默认显示更多 {dede:arclist row="15" imgwidth='80' imgheight='60' titlelen='60' orderby="id" orderway="DESC"} <a href="[field:arcurl/]" class="list-item-box" title="[field:title/]"> <dl class="list-item"> <dt class="pic">[field:image/]</dt> <dd><div class="news-info"> <div class="news-title">[field:title/]</div> <div class="news-info-bottom"> <span>[field:typename/]</span><span class="news-date">[field:pubdate function="MyDate('m月d日 H:s',@me)"/]</span> </div> </div> </dd> </dl> </a> {/dede:arclist}
3、编写服务器端调用代码(一)获取数据我们打开plus目录下的list.php文件，在require_once(dirname烫喇霰嘴(__FILE__)."/../include/common.inc.php");这段代码的事后面写上以下代码if(isset($_GET['ajax'])){ $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码 $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每页多少条，也就是一次加载多少条数据 $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。 $typesql = $typeid ? " WHERE typeid='$typeid" : '';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需 $total_sql = "SELECT COUNT(id) as num FROM `#@__archives` $typesql "; $temp = $dsql->GetOne($total_sql); $total = 0;//数据总数 $load_num =0; if(is_array($temp)){ $load_num= round(($temp['num']-15)/$pagesize);//要加载的次数,因为默认已经加载了 $total = $temp['num']; } $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule, t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath FROM `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize"; $dsql->SetQuery($sql); $dsql->Execute('list'); $statu = 0;//是否有数据，默认没有数据 $data = array();}
4、编写服务器端调用代码(二)返回数据我们在第三步的逻辑代码中加入以下代码 $in蟠校盯昂dex = 0; while烫喇霰嘴($row = $dsql->GetArray("list")){ $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160); $row['id'] = $row['id']; $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'], $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']); $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'], $row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']); if($row['litpic'] == '-' || $row['litpic'] == ''){ $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif'; } if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){ $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic']; } $row['picname'] = $row['litpic'];//缩略图 $row['stime'] = GetDateMK($row['pubdate']); $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链 $row['fulltitle'] = $row['title'];//完整的标题 $row['title'] = cn_substr($row['title'], 60);//截取后的标题 $data[$index] = $row; $index++; } if(!empty($data)){ $statu = 1;//有数据 } $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num); echo json_encode($result);//返回数据 exit();
5、编写js代码-配置信息var loadConfig = { url_api:'http://localhost/mobile/plus/list.php',//服务端处理路径 typeid:0,//分类 page:2,//开始页码 pagesize:15,//分页数 loading : 0,//加载状态,默认为未加载 }
6、编写js代码-滚动处理函数function loadMoreApply(){//如果未加载数据，就加载 if(loadConfig.loading == 0){ var typeid = loadConfig.typeid; var page = loadConfig.page; var pagesize = loadConfig.pagesize; var url = loadConfig.url_api,data:{ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize}; var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;//当滚动条高度加上浏览器可视区域高度大于等于文档高度减去浏览器可视区域高度时，就加载。文档高度减去浏览器可视区域高度，就是可以滚动条可以滚动的高度 if (sTop + cHeight >= dHeight - cHeight) { loadConfig.loading = 1;//将加载状态改为已加载 function ajax(url, data) { $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) { addContent(data); }}); } ajax(url,data); } }}
7、编写js代码-html处理函数function addContent(rs){罕铞泱殳 if(rs.statu== 1){ 艘早祓胂 var data = rs.list; var total = rs.total;loadConfig.load_num = rs.load_num;//加载次数，按道理应该在第五步就已经获取到加载次数和数据总数的 var arr=[]; var length = data.length; for(var i=0;i<length;i++){ arr.push('<a href="'+data[i].arcurl+'" class="list-item-box" title="'+data[i].title+'">'); arr.push('<dl class="list-item">'); arr.push('<dt class="pic"><img src="'+data[i].picname+'" width="80" height="60"/></dt>'); arr.push('<dd><div class="news-info">'); arr.push('<div class="news-title">'+data[i].title+'</div>'); arr.push('<div class="news-info-bottom">'); arr.push('<span>'+data[i].typename+'</span><span class="news- date">'+data[i].pubdate+'</span>'); arr.push('</div></dd></dl></a>'); } $('.list-zone').append(arr.join('')); if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){//如果当前页码大于加载的总次数 window.removeEventListener('srcoll',loadMoreApply,false); } loadConfig.page++;递增页码 loadConfig.loading = 0;//加载完毕后，把加载状态改为0 }}
8、编写js-绑定scroll事件window.addEventListener('scroll', loadMoreApply, false);
9、测试结果打开浏览器的开发工具，切换到网络选项，我们尝试着把滚动条拉到最底部，你会在开发工具的面板中看到网页发送了一条get请求，我们看一下有没有获取到数据。注意，如果你的滚动条滚到了最底部，刷新页面时，网页就已经发一条加载请求。如果你觉得很别扭，你可以初始化滚动条的高度为0.
