• 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>

  • 相关阅读:
    Unity3D保护资源管理文件的AssetBundle包加密!
    untiy Kinect SDK 的默认BUG 修改方法
    Android 插件扩展系列之 封装与应用
    datagridview 单击单元格获取单元格的内容
    winform 显示动态图片 Gif
    Unity 漫游相机脚本
    Unity3D教程:c#脚本yield的用法
    Unity 脚本实现CoverFlow效果
    删除 treeview Node节点 循环删除子节点 存储过程
    Unity 怪物AI
  • 原文地址:https://www.cnblogs.com/woodk/p/4830602.html
Copyright © 2020-2023  润新知