要实现的效果是这样的:

每次点击显示更多按钮,都会往下显示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. CNN 常用的几个模型

    LeNet5 论文:http://yann.lecun.com/exdb/publis/pdf/lecun-01a.pdf LeNet-5:是Yann LeCun在1998年设计的用于手写数字识别的卷 ...

  2. echarts折线区域图

    一.使用场景 当舒张压和收缩压超过或低于他们对应的范围时,折线应该给与不同颜色.两个指标对应的范围也要填充不同的颜色. 二.实现方案 主要使用了echarts中的visualMap,series.ma ...

  3. dart 异步

    使用异步有两种方法 then 或者 async/await. async/await 方法更易于理解,

  4. PAT甲级——A1110 Complete Binary Tree【25】

    Given a tree, you are supposed to tell if it is a complete binary tree. Input Specification: Each in ...

  5. javaSpring学习总结day_02

    使用注解注入: 1.用于创建bean对象 @Component: 作用:相当于配置了一个bean标签 位置:类上面 属性:value,含义是bean的id,当不写时,有默认值,默认值是当前类的短名,首 ...

  6. 2019-8-31-dotnet-core-发布只带必要的依赖文件

    title author date CreateTime categories dotnet core 发布只带必要的依赖文件 lindexi 2019-08-31 16:55:58 +0800 20 ...

  7. shell脚本使用需要注意的地方

    shell脚本中,函数内部定义变量可以为局部变量和全局变量,局部变量使用local定义,全局变量不带local,全局变量可以在函数外部可见,如下: #!/bin/bash function calle ...

  8. python中使用xlrd、xlwt操作excel

    python 对 excel基本的操作如下: # -*- coding: utf-8 -*- import xlrd import xlwt from datetime import date,dat ...

  9. RMQ问题——ST算法

    比赛当中,常会出现RMQ问题,即求区间最大(小)值.我们该怎样解决呢? 主要方法有线段树.ST.树状数组.splay. 例题 题目描述 2008年9月25日21点10分,酒泉卫星发射中心指控大厅里,随 ...

  10. 如何在 Apache Flink 中使用 Python API?

    本文根据 Apache Flink 系列直播课程整理而成,由 Apache Flink PMC,阿里巴巴高级技术专家 孙金城 分享.重点为大家介绍 Flink Python API 的现状及未来规划, ...