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

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

二次开发方法:

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. SeaJS入门篇一 怎么使用query

    研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'> ...

  2. 2016-2017-2 《Java程序设计》教学进程

    2016-2017-2 <Java程序设计>教学进程 目录 考核方式 课前准备 教学进程 第00周学习任务和要求 第01周学习任务和要求 第02周学习任务和要求 第03周学习任务和要求 第 ...

  3. python 环境搭建

    python下载地址: 进入https://www.python.org/download/releases/3.3.4/,下载Windows X86-64 MSI Installer (3.3.4) ...

  4. mvc自定义全局异常处理

    异常信息处理是任何网站必不可少的一个环节,怎么有效显示,记录,传递异常信息又成为重中之重的问题.本篇将基于上篇介绍的html2cancas截图功能,实现mvc自定义全局异常处理.先看一下最终实现效果: ...

  5. javascript,从库到框架再到平台

    对于库,框架,平台,从事过后端开发的人并不陌生,一直基于.net平台做开发,本人懒惰,面对庞大的体系,基本只掌握一点开发上用得着的技术,到是在程序结构,业务过程等方面花了点精力. 随着VS开发工具的成 ...

  6. outlook 2016 for windows 每次刷新发送接收邮件会弹出登陆界面

    Q: outlook2016 for windows 每次刷新发送接收邮件会弹出登陆界面,office365 ProPlus 都是正常激活了,Word 和Excel都不存在此类问题 A: 排除用户的o ...

  7. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  8. deepin 15.3 安装配置nginx

    1.安装nginx sudo apt-get install nginx 2.配置nginx sudo gedit /etc/nginx/sites-enabled/default 找到:index ...

  9. UIlabel的字体自适应属性

    有时候我们需要UIlabel根据字数多少来减小字体大小,使得UIlabel能够显示全所有的文字.你需要做的就是设置minimumScaleFactor.minimumScaleFactor默认值是0, ...

  10. c#.NET微信自定义菜单

    private void customMenu() { //获取access_token string access_token = GetAccessToken(); StringBuilder s ...