DEDECMS 列表无限加载

最新推荐文章于 2021-08-05 16:40:31 发布

转载最新推荐文章于 2021-08-05 16:40:31 发布 · 3k 阅读

dedecms 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现动态分页加载内容的技术，包括解析URL参数、获取当前栏目ID、设置列表模板和样式、点击事件处理、加载下一页面内容及优化用户体验等关键步骤。通过实例代码演示，帮助开发者掌握分页加载的实现细节。

<script type="text/javascript">
	var catid = $(".list_next").data("catid");
    var cur_list = $(".list_next").data("list") == "列表样式2" ? "列表样式2" : ".list";
    var next_no = 2;
    var path_arr = window.location.pathname.split("/");
    var file = path_arr[path_arr.length-1];
    if(file != "index.html" && file != ""){
        next_no = parseInt(file.split(".")[0].split("-")[1]) + 1;
    }
    $(".list_next a").click(function(){
        var _this = $(this);
        _this.html("正在加载中...");
        $(".list_load").load("./"+catid+"-"+next_no+".html?now="+new Date().getTime()+" "+cur_list+" ul" , function(data , status){
            if(status == "success"){
                if($(".list_load").html().indexOf("li")<0){
                    _this.html("没有更多内容了");
                    _this.css("background-color" , "#888");
                    _this.unbind("click");
                } else {
                    _this.html("下一页");
                    $(cur_list+" ul").append($(".list_load ul").html());
                    next_no++;
                }
            } else {
                _this.html("没有更多内容了");
                _this.css("background-color" , "#888");
                _this.unbind("click");
            }
        });
    });
</script>
<div class="list">
    <ul>
    	<li></li>
    </ul>
</div>
<!--
data-catid 当前栏目id
data-list 当前模版列表特殊样式
-->
<div class="list_next" data-catid="{dede:field.id/}" data-list=""><a href="javascript:;">下一页</a></div>
<div class="list_load"></div>