移动开发中单页异步加载所有列表项

在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可以接受的。那么，当我们为手机或其他移动端设计界面的话，使用分页未免有些笨拙和难以使用，这时候我们可以使用在单页加载所有列表项。当屏幕滑动到最低端的时候，会出现“点击加载更多”的按钮，当我们点击此按钮的时候，会加载更多的列表信息到当前页。当然，一切都是异步的，所以我们使用Jquery Ajax和后端ThinkPHP的Action通信。

下面先看看前端的代码：HTML

<div class="row" style="margin-top:5px;" id="bikeList">
 ……已加载的列表项
</div>

<div class="row showmore">
<div class="col-sm-8 col-xs-12">
<a href="javascript:void(0);" onclick="more()">点击加载更多</a>
</div>
</div>

JavaScript：

var p=1;
function more()
{
 p++;
 //alert(p);

 $.get('/doc/more',{'page':p,'参数1':参数1的值,'参数2':参数2的值
 ……},function(data)
       {
         if(data)
         $('#bikeList').append(data);
          else
           alert("已经没有更多信息了");
       });
 }

ThinkPHP Action中的代码：

public function more($page,$sn,$bk,$fd,$dr)
 {
  $page=$_GET['page'];
  $参数1=$_GET['参数1'];
  $参数2=$_GET['参数2'];
  ……
  $pcount=10;//每次加载的列表数
  $bikeList=$this->getbikeList(参数1,参数2,……,$page,$pcount);
  $this->bikeList=$bikeList;
  $this->display();
  
 }

为了方便起见，我们也为这里的More函数建立了视图，不用手写一大推HTML了，其视图代码 More.html如下：

<volist name="bikeList" id="vobike">
 具体列表项……
</volist>

这里More.html输出的HTML代码就是前面Jquery函数more中的data参数的值。以上是我的一点开发经验的分享，希望能对你有所启发，期待与您的交流。

本文首发于顶求网，转载请注明来源