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。

基本完美~

apiCloud实现加载更多效果,基本完美~的更多相关文章

  1. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  2. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  3. jquery实现加载更多效果

    情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...

  4. ajax 下拉加载更多效果

    1.生成HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 基于jQuery实现点击列表加载更多效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   < ...

  6. vue2.0 自定义 下拉刷新和上拉加载更多(Scroller) 组件

    1.下拉刷新和上拉加载更多组件 Scroller.vue <!-- 下拉刷新 上拉加载更多 组件 --> <template> <div :style="mar ...

  7. 实现上拉加载更多的SwipeRefreshLayout

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...

  8. apicloud如何实现优雅的下拉刷新与加载更多

    apicloud中提供下拉刷新监听事件api,也提供滚动到底部事件的监听,能够实现下拉刷新和滚动到底部加载更多功能,但是我们真的就满足实现功能了吗?将两个代码拼凑起来运行看看发现了什么?是的,在滚动到 ...

  9. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

随机推荐

  1. #定位系统性能瓶颈# perf

    perf是一个基于Linux 2.6+的调优工具,在liunx性能測量抽象出一套适应于各种不同CPU硬件的通用測量方法,其数据来源于比較新的linux内核提供的 perf_event 接口 系统事件: ...

  2. Qt容器类的对象模型及应用(线性结构篇:对于QList来说,sharable默认是false的,但对于接下来讲的QVector来说,sharable默认是true)

    用Qt做过项目开发的人,肯定使用过诸如QList.QVector.QLinkList这样的模板容器类,它们虽然名字长的不同,但使用方法都大致相同, 因为其使用方法都大体相同,很多人可能随便拿一个容器类 ...

  3. 浅析PHP中cookie与session技术

    1.cookie是什么? cookie指某些站点为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密). 通俗来理解就是,你去一个专卖店或者超市买东西,然后店里给你办一张 ...

  4. 0x05 排序

    说是排序结果就是各种奇技淫巧 中位数被坑多了久病成医,例题一题搞笑一题糖果传递(昨晚精神那么好效率还那么差) #include<cstdio> #include<iostream&g ...

  5. 11.QT窗口布局切割

    int main(int argc, char *argv[]) { QApplication a(argc, argv); //MainWindow w; //w.show(); //左右分割 7 ...

  6. BottomSheetBehavior 结合CoordinatorLayout实现底部栏

    1.xml <?xml version="1.0" encoding="utf-8"?> <android.support.design.wi ...

  7. java的-D命令行参数 mvn -D参数

    java的-D命令行参数 我们会用mvn启动一个应用,如下的命令行: MAVEN_OPTS="-XX:PermSize=256m -XX:MaxPermSize=512m" mvn ...

  8. java容器基础

    总结一下学过的java容器知识. 一.java容器框架 由于之前学习的java容器类比较混乱,先简单的整理一下java集合框架. 首先,像这种图,网上到处都是,因为这个也算比较准确吧,我也懒得自己画了 ...

  9. Codeforces Round #499 (Div. 2) D. Rocket_交互题_二分

    第一次作交互题,有点不习惯. 由于序列是循环的,我们可以将一半的机会用于判断当前是否是在说谎,另一半的机会用于二分的判断. 对于判断是否实在说谎,用1判断即可.因为不可能有比1还小的数. 本题虽然非常 ...

  10. echart的tooltip自定义换行

    自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...