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

在做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参数的值。以上是我的一点开发经验的分享，希望能对你有所启发，期待与您的交流。

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