zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    CodeForces 219D Choosing Capital for Treeland (树形DP)
    POJ 3162 Walking Race (树的直径,单调队列)
    POJ 2152 Fire (树形DP,经典)
    POJ 1741 Tree (树的分治,树的重心)
    POJ 1655 Balancing Act (树的重心,常规)
    HDU 2196 Computer (树形DP)
    HDU 1520 Anniversary party (树形DP,入门)
    寒门子弟
    JQuery选择器(转)
    (四)Web应用开发---系统架构图
  • 原文地址:https://www.cnblogs.com/woodk/p/4830602.html
Copyright © 2011-2022 走看看