类似百度图片的效果,滚动到底部后,点击加载更多,加载出第二页,第三页。。。

替代了传统的上一页,下一页,第几页,以达到在某些情况下使得用户体验更好。

二次开发方法:

1.先在模板文件中增加ajax文件夹,增加article_list.html模板文件:

{%forlist from=$array key=i%}
<li><a title="{%$array[i].title%}" href="{%$array[i].link%}">{%$array[i].ctitle%}</a></li>
{%/forlist%}

2.在列表页模板文件中,增加列表代码,和最重要的ajax代码:

<script id="panel-init">
function pageajaxlist() {
var limit = $('#limit').val();
var nowpage = $('#nowpage').val();
var maxpage = $('#maxpage').val();
var limitstard = parseInt(nowpage) * limit;
nowpage = parseInt(nowpage) + 1;
$('#nowpage').val(nowpage);
if (nowpage == maxpage){
$("#pagearticlelistbotton").hide();
}
if (nowpage <= maxpage) {
$.ajax({
type: "GET",
url: "{%find:mlink class=1 out=article%}&tid={%$type.tid%}",
data: "limitstard=" + limitstard + "&nowpage=" + nowpage + "&limit=" + limit,
success: function(data) {
$("#articlelist").append(data);
}
});
}
}
</script> <!--每页显示数量-->
<input type="hidden" name="limit" id="limit" value="{%$limit%}"/>
<!--数据总数量-->
<input type="hidden" name="countnum" id="countnum" value="{%$countnum%}"/>
<!--总翻页数量-->
<input type="hidden" name="maxpage" id="maxpage" value="{%$maxpage%}"/>
<!--当前翻页数-->
<input type="hidden" name="nowpage" id="nowpage" value="1"/> <ul class="text_area">
<li class="list_divider">{%$type.typename%}</li>
<li class="list_info">
<ul class="text_list" id="articlelist">
{%forlist from=$array key=i%}
<li><a title="{%$array[i].title%}" href="{%$array[i].link%}">{%$array[i].ctitle%}</a></li>
{%/forlist%}
</ul>
{%if $maxpage>1%}
<a id="pagearticlelistbotton" data-theme="c" data-role="button" href="javascript:pageajaxlist();">查看更多</a>
{%/if%}
</li>
</ul>

espcms列表页ajax无限加载的更多相关文章

  1. espcms列表页ajax获取内容 - 并初始化swiper

    <link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...

  2. 移动端h5列表页上拉加载更多

    背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...

  3. MUI - 解决动态列表页图片懒加载再次加载不成功的bug

    首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...

  4. Ajax做列表无限加载和Ajax做二级下拉选项

    //栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index ...

  5. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  6. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  7. Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  8. Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页

    1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  9. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

随机推荐

  1. kendo ui简介

    Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha ...

  2. SQL基础--ROWNUM伪列

    ROWNUM伪列 的概念: rownum表示的是一个数据行编号的伪列,它的内容是在用户查询数据时,为用户动态分配的一个数组(行号). 注意它是随机生成的,并不是和某一行数据绑定在一起的. 观察rown ...

  3. Nginx负载均衡实践之一:基本实现

    由于现在的网站架构越来越大,基于互联网的用户也是日渐增长,所以传统的单机版服务器已经渐渐不能适应时代发展的需要.最近在和其他企业接触的过程中,发现对于互联网的经验尤为看重,所谓的互联网经验,其实就是指 ...

  4. javascript正则表达式:匹配所有html标签

    此正则表达式收集于网络,但那个网站连复制一下都需要注册会员,鄙视之,所以不提他了.而且,原作者也不可能是那个网站. html标签有<h1></h1>这种成对的,也有<br ...

  5. [LintCode] Longest Increasing Subsequence 最长递增子序列

    Given a sequence of integers, find the longest increasing subsequence (LIS). You code should return ...

  6. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...

  7. Redis 学习(二)

    Redis可以存储以下5种数据类型 1. String 字符串 整数 浮点 2. List   一个链表 3. Set  无序收集器 4. Hash  无序散列表 5. Zset   有序集合

  8. Linux下常用SVN命令

    1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain  --u ...

  9. 【bzoj1227】 SDOI2009—虔诚的墓主人

    http://www.lydsy.com/JudgeOnline/problem.php?id=1227 (题目链接) 题意 一个n*m的公墓,一个点上要么是墓地,要么是常青树,给出一个数K,并规定每 ...

  10. BZOJ2242 [SDOI2011]计算器

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...