apiCloud實現加載更多效果，基本完美~

apiCloud實現加載更多效果

1.接口支持，加入參數page。

$page = $this->_request('page','trim','1');
$pagesize = 10; // 默認獲取10條

2.利用limit獲取數據

select * from sh_category limit 20;
select * from sh_category limit 0,10; // 第一頁
select * from sh_category limit 10,10;// 第二頁

程序處理

$goods = $this->where($where)->limit(($page-1)*$num,$num)->order($order)->select();

第一頁，就是從0,10。第二頁，就是10,10。

3.接口提示下一頁是否有數據，以及當前頁

$this->outData['status'] = '1';
$this->outData['msg']    = '獲取成功';
$this->outData['info']['goods']   = $goods;
$this->outData['info']['page']   = $page;
$this->outData['info']['category_id']  = $category_id;
if (count($next_page_goods) > 0) {
   $this->outData['info']['next'] = '1'; // 還有數據
} else {
   $this->outData['info']['next'] = '0'; // 已經沒有數據
}

4.前端通過doT處理

<div id="info_area"></div>
<script id="info_tmpl" type="text/x-dot-template">
{{? typeof it.goods != 'undefined'}}
    <div id="goods_data" class="aui-content">
        <ul class="aui-list aui-media-list">
            {{~ it.goods:gval:gkey}}
            <li class="aui-list-item" onclick="openGoodsDetail('{{= gval.name}}','{{= gval.id}}')">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media">
                        <img src="{{= gval.logoimg}}">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">
                                {{= gval.name}}
                            </div>
                        </div>
                        <div class="red">￥{{= gval.price}}</div>
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title" style="text-decoration:line-through;">￥{{= gval.oprice}}</div>
                            <div class="aui-list-item-right">已售{{= gval.salecount}}件</div>
                        </div>
                    </div>
                </div>
            </li>
            {{~ }}
        </ul>
    </div>
    {{? it.next == '1'}}
    <div id="more" onclick="ajaxGetMore('{{= it.category_id}}','{{= parseInt(it.page)+1}}')" style="margin: 15px;color:gray;text-align: center;">加載更多</div>
    {{??}}
    <div id="none" style="margin: 15px;color:gray;text-align: center;">沒有了</div>
    {{?}}
{{?? }}
    <div style="margin-top:20px;text-align: center;color:gray;">
        暫無數據
    </div>
{{?}}
</script>

這里有個ajaxGetMore方法。處理加載更多數據。

設置一個base_area，專門裝填上一頁的數據。下一頁的數據，繼續在info_area中展示。

<div id="base_area" class="aui-content">
</div>

1)默認的ajax獲取第一頁數據js

// 獲取分類商品信息
    api.ajax({
        url: BASE_SH_REQUEST_URL+'/?g=Api&m=Goods&a=getCategoryOptimizedGoods',
        method: 'get',
        data: {
            values: {
                category_id: category_id
            }
        }
    }, function(json, err) {
        if (json.status == '1' || json.status == '4') {
            var interText = doT.template($("#info_tmpl").text());
            $("#info_area").html(interText(json.info));
        } else {
            var toast = new auiToast();
            toast.fail({
                title: json.msg,
                duration: 2000
            });
        }
    });

2)ajaxGetMore獲取更多js

// 獲取更多
// page為下一頁的數值
function ajaxGetMore(category_id,page) {
    var base_area = $api.byId('base_area'); 
    var goods_data= $api.byId('goods_data');
    $api.append(base_area,$api.html(goods_data));

    api.ajax({
        url: BASE_SH_REQUEST_URL+'/?g=Api&m=Goods&a=getCategoryOptimizedGoods',
        method: 'get',
        data: {
            values: {
                category_id: category_id,
                page:page,
            }
        }
    }, function(json, err) {
        if (json.status == '1' || json.status == '4') {
            var interText = doT.template($("#info_tmpl").text());
            $("#info_area").html(interText(json.info));
        } else {
            var toast = new auiToast();
            toast.fail({
                title: json.msg,
                duration: 2000
            });
        }
    });
}

核心就在這里

var base_area = $api.byId('base_area'); 
var goods_data= $api.byId('goods_data');
$api.append(base_area,$api.html(goods_data));

每次點擊加載更多，都向base_area區域中把上一頁的goods_data數據填入。通過append方法，可以很好的處理這種填入效果。

append，描述：在DOM元素內部，最后一個子元素后面插入HTML字符串。

html，描述：獲取或設置DOM元素的innerHTML。

基本完美~