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 ...
随机推荐
- strtol 函数用法
strtol是一个C语言函数,作用就是将一个字符串转换为长整型long,其函数原型为: long int strtol (const char* str, char** endptr, int bas ...
- Windows phone应用开发[18]-下拉刷新
在windows phone 中采用数据列表时为了保证用户体验常遇到加载数据的问题.这个问题普遍到只要你用到数据列表就要早晚面对这个问题. 很多人会说这个问题已经有解决方案. 其实真正问题并不在于如何 ...
- ADC
ADC转换分为两种通道组 1.规则通道组 2.注入通道组(可打断规则通道组) 工作模式 通道模式 转换模式 复位校准 AD校准
- Java使用代理服务器
HTTP协议是基于TCP协议的,TCP协议在Java中的体现就是套接字.在了解HTTP协议的基础上,完全可以通过TCP来实现一套HTTP库,这个库可以发起网络请求和接受网络请求.只要能用URLConn ...
- Linux 部署 nginx服务代理
原文地址:http://www.cnblogs.com/ants/p/5732337.html#_label5 参考地址:http://www.cnblogs.com/hustskyking/p/ng ...
- Oracle 11g导出空表、少表的解决办法
ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间. 解决方法: 1)insert一行,再rollback就产生segment了 该方法是在在空表中插入数据,再删除,则产 ...
- Lua和C++交互详细总结
转自:http://cn.cocos2d-x.org/tutorial/show?id=1474 一.Lua堆栈 要理解Lua和C++交互,首先要理解Lua堆栈. 简单来说,Lua和C/C++语言通信 ...
- 理解 HTTPS 的工作原理
目标读者:理解HTTP协议,对称和非对称加密,想要了解HTTPS协议的工作原理. 读完本文,你能明白 什么是HTTPS,TLS(SSL),TLS和HTTPS是什么关系? 什么是证书和数字签名,它们是如 ...
- SpringBoot源码分析:spring的基本架构
在深入了解springboot之前,我们需要了解spring,springboot本身就是基于spring而构建:是微服务架构中一个比较流行的框架:类似spring提供了一套完整的微服务方案如spri ...
- xcode配置绝对路径与相对路径
一般我们在xcode里面配置包含工程目录下头文件的时候,都要关联着相对路径和绝对路径,如果只是自己用这个项目,用绝对路径的问题不大,但是如果你把工程发给别人,别人就要在改这个绝对路径,这时候绝对路径 ...