你的位置:首页 > Java教程

[Java教程]移动开发中单页异步加载所有列表项


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

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

<div id="bikeList">
……已加载的列表项
</div>

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

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