espcms列表页ajax无限加载
类似百度图片的效果,滚动到底部后,点击加载更多,加载出第二页,第三页。。。
替代了传统的上一页,下一页,第几页,以达到在某些情况下使得用户体验更好。
二次开发方法:
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无限加载的更多相关文章
- espcms列表页ajax获取内容 - 并初始化swiper
<link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...
- MUI - 解决动态列表页图片懒加载再次加载不成功的bug
首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...
- Ajax做列表无限加载和Ajax做二级下拉选项
//栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index ...
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- Vue.js 开发实践:实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
随机推荐
- ubuntu14.04为安装fcitx卸载ibus后出现system setting (系统设置)中图标消失的问题
最近在系统为ubuntu14.04原版中,安装fictx.按照以往的经验应先把ibus卸载干净,否则可能会有冲突.因此惯性思维驱使,先卸载ibus,然后安装fcitx,但是问题出现了,system s ...
- Matlab2015入门学习01
1. 两个命令: clear: 清除内存中变量的值(在workspace中可以看到) clc: 清除Command Window中的输出 2. 脚本编辑器: matlab脚本扩展名为*.m 在Comm ...
- yii的验证码
验证码比较麻烦,在三部分各有体现 controller <?php namespace app\controllers\demo_code; use yii\web\Controller; cl ...
- delphi 并发取数据库id问题
这段时间有个项目id频繁出现 id冲突的问题 一真找不到原因 后来想到了个办法 在新建取id时先把到到的id保存起来 上代码 望大神指点下 /// <summary> /// 到表中的最大 ...
- c# 备份数据库恢复数据库
/// <summary> /// 对数据库的备份和恢复操作,Sql语句实现 /// </summary> /// <param name="cmdText&q ...
- Jstat PID not found
解决步骤 删除/tmp/hsperfdata_{USER}文件夹,如果是root用户登录,即为/tmp/hsperfdata_root 通过chown.chmod命令保证执行jstat用户必定拥有对/ ...
- AutoVFL(适配)
1.添加约束(系统) a.一个约束(上下左右) +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)att ...
- Zabbix监控php-fpm status
开启php-fpm status php-fpm.conf pm.status_path = /statusx45 nginx.conf location ~ /(statusx45)$ { incl ...
- [Android]Volley源码分析(五)
前面几篇通过源码分析了Volley是怎样进行请求调度及请求是如何被实际执行的,这篇最后来看下请求结果是如何交付给请求者的(一般是Android的UI主线程). 类图:
- C#之方法的声明与调用
//params关键字使用 class Program { static void Main(string[] args){ , , , }; Console.WriteLine(AddFunctio ...