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>