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处理

这里有个ajaxGetMore方法。处理加载更多数据。

设置一个base_area，专门装填上一页的数据。下一页的数据，继续在info_area中展示。

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。

基本完美~