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>

  • 相关阅读:
    Lambda表达式 Lambda expression(1)
    解密随机数生成器(2)——从java源码看线性同余算法(转)
    解密随机数生成器(1)——真随机数生成器(转)
    HTML标签 table(4)
    HTML标签详解(3)
    Flink DataStream API
    Apache Flink Watermark
    Flink核心概念
    Flink SQL and Table
    Hive ORC File Format
  • 原文地址:https://www.cnblogs.com/woodk/p/4830602.html
Copyright © 2011-2022 走看看