在做WEB開發的時候我們經常會遇到分頁的處理，如果在PC上顯示網頁的話，使用傳統的分頁是可以接受的。那麼，當我們為手機或其他移動端設計界面的話，使用分頁未免有些笨拙和難以使用，這時候我們可以使用在單頁載入所有列表項。當屏幕滑動到最低端的時候，會出現“點擊載入更多”的按鈕，當我們點擊此按鈕的時候，會加 ...
在做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參數的值。以上是我的一點開發經驗的分享，希望能對你有所啟發，期待與您的交流。
本文首發於頂求網，轉載請註明來源
