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>
时间: 2024-10-10 00:36:05

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

phpcms列表页js实现加载更多效果

先看一下效果: 默认显示6条数据,点击一次加载更多追加显示6条,直到数据全部显示完全,隐藏加载更多按钮. 列表页引入一下文件: <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../jquery.showMore.js"><

Wordpress无限Ajax分页加载更多文章

今天在Github上找东西的时候发现了一个叫做 Infinite AJAX Scroll 的项目,看到它通过很简单的设置,就可以让Wordpress支持分页Ajax无线加载功能.测试了下非常好用,现在分享给大家~ 下面以Wordpress自带主题 Twenty Twelve 主题为例: 第1步: 把 jquery-ias.min.js 拷贝到 wp-content/themes/twentytwelve/js 文件夹下. 第2步: 在编辑器中打开 wp-content/themes/twenty

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

概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用鼠标滚轮的时候,页面会自动加载剩余的内容.如下: 简约而不简单,正是这种别出心裁,突破常规的设计才能得到用户的青睐…… 实现思路 在前端开发可以使用一些jQuery插件实现这种效果,后台只需要准备好数据就行了.在Qt中如何给列表组件(QListWidget,QTreeWidget, QTableWi

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

1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 几个常见的用到ajax的场景. 比如你在逛知乎,你没有刷新过网页,但是你却能看到你关注的用户或者话题有了新动态的消息提示. 还比如,我们在看视频时,可以看到下面

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

https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻

[DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能

本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: 数据量过大,影响加载速度 用户体验差,很难定位到之前自己看过的某篇文章 扩展性差,如

JS实现-页面数据无限加载

在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: 当滚动条滚动到页面底部时,提示“正在加载…”. 当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”: 实现数据无限加载的过程大致如下: 1.滚动条滚动到页面底部. 2.触发ajax加载,把请求返回的数据加载到列表后面. 如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:当滚

爬取Ajax动态加载网页

常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 :网站根据IP地址访问频率进行反爬,短时间内进制IP访问 解决方案: 1.构造自己IP代理池,每次访问随机选择代理,经常更新代理池 2.购买开放代理或私密代理IP 3.降低爬取的速度 3.User-Agent限制 :类似于IP限制 解决方案: 构造自己的User-Agent池,每次访问随机选择 5.

JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是在JRoll第一版基础上重写JRoll滑动算法,基于时间运动,解决帧频降低时滑动缓慢的问题,更改垂直水平方向判断方法,使捕获垂直水平方向更准确灵敏. JRoll第二版增减了一些api不完全兼容JRoll第一版. 先睹为快 http://www.chjtx.com/JRoll/demos/ 运行示例