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无限加载

最新文章

热门文章