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

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

    
       ……已加载的列表项 
    
 
    
 
     
 
      点击加载更多 
     
 
    

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如下：

    
       具体列表项…… 
    

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

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