要实现的效果是这样的:

每次点击显示更多按钮,都会往下显示2条数据,直到后面没有数据了。。

数据表:

articleList模板文件

<include file="./Application/Common/View/Public/header.html" />
<div class="container">
<volist name="list" id="vo">
<div class="panel panel-default">
<div class="panel-heading">{$vo.title}</div>
<div class="panel-body">{$vo.content}</div>
</div> </volist>
<if condition="count($list) eq 5">
<a class="btn btn-block btn-default" style="margin-bottom: 20px;" href="javascript:;">显示更多</a>
</if>
</div>
<script>
var nStart = 5;
$('.btn').click(function() { var _this = $(this); if(nStart >= {$total}) {
alert('后面没有数据了!'); _this.text('后面没有数据了'); return false; } else {
$.post("{:U('articleAjax')}", {start: nStart}, function(res) { $.each(res['result'], function(i, item) { _this.before('<div class="panel panel-default">\
<div class="panel-heading">'+item.title+'</div>\
<div class="panel-body">'+item.content+'</div>\
</div>'); }); }); nStart += 2; } });
</script> <include file="./Application/Common/View/Public/footer.html" />

Index控制器中的articleList方法和articleAjax返回方法

// 文章列表
public function articleList() { $article = M('article'); $total = $article->count(); $this->assign('total', $total); $list = $article->limit(5)->order('id asc')->select(); $this->assign('list', $list); $this->display(); } // ajax异步加载文章
public function articleAjax() { $article = M('article'); $start = I('post.start'); $list = $article->limit($start, 2)->order('id asc')->select(); $this->ajaxReturn(array( 'result'=>$list,'status'=>1, 'msg'=>'获取成功!')); }

https://blog.csdn.net/u010081689/article/details/46702507?utm_source=blogxgwz10

Thinkphp 加载更多的更多相关文章

  1. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  2. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  3. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  4. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  7. Android之Socket通信、List加载更多、Spinner下拉列表

    Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...

  8. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  9. MVC中实现加载更多

    需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示“正在 ...

随机推荐

  1. DNS 攻击方式及攻击案例

    [赛迪网-IT技术报道]2010年1月12日晨7时起,网络上开始陆续出现百度出现无法访问的情况反馈, 12时左右基本恢复正常:18时许百度发布官方版本公告:对事故原因说明为:"因www.ba ...

  2. HDU-1852-Beijing 2008-一个神奇的公式求逆元

    As we all know, the next Olympic Games will be held in Beijing in 2008. So the year 2008 seems a lit ...

  3. js比较常用的

    1. <a href="javascript:void(0);" id="div1_bu" >点击链接可以删除div2</a> 超链接的 ...

  4. python Six 模块

    Six模块用于python2和python3的兼容 import six 官网链接:https://six.readthedocs.io/

  5. IoGetTopLevelIrp

    学习写驱动,其实,挺无聊,但是也挺有意思的 IoGetTopLevelIrp 今天在看一个文件系统过滤驱动的时候,看到这个函数,它是干嘛的,为什么会有这么个东西 https://msdn.micros ...

  6. Python调用DLL动态链接库——ctypes使用

    最近要使用python调用C++编译生成的DLL动态链接库,因此学习了一下ctypes库的基本使用. ctypes是一个用于Python的外部函数库,它提供C兼容的数据类型,并允许在DLL或共享库中调 ...

  7. java_瞬时

    瞬时(Instant): 方法: public class InstantTest01 { public static void main(String[] args){ //静态方法,返回utc上的 ...

  8. java_JDK8中新增的时间API

    java.time 包含值对象的基础包 java.time.chrono 提供对不同的日历系统的访问 java.time.format 格式化和解析时间的日期 java.time.temporal 包 ...

  9. JS流程控制语句 退出循环break 在while、for、do...while、while循环中使用break语句退出当前循环,直接执行后面的代码。

    退出循环break 在while.for.do...while.while循环中使用break语句退出当前循环,直接执行后面的代码. 格式如下: for(初始条件;判断条件;循环后条件值更新) { i ...

  10. show master status

    只有在主库上执行才能有效抵输出: 具体文档如下: # 在127.:3306主库上执行 tmp@127.0.0.1 ((none))> show variables like '%server%' ...