• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    织梦DedeCMS列表实现无限加载并且不影响静态页生成与访问的方法
    POST TIME:2021-05-24 03:10

    很多朋友在建站过程中尤其是新闻类以及图片类网站,需要用到列表无限加载,下面就告诉大家如何实现这个功能,而且又不影响列表静态页的生成。

    我们需要用到Jquery.load()方法来请求下一页达到列表页无限加载的效果。下面是具体的代码:

    列表页简单的dom结构代码:

     

    <div class="list">
    <ul>
    <li><a href="">列表简单的dom结构</a></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>

    JS请求的代码如下:
    <script type="text/javascript"> 
    var catid = $(".list_next").data("catid");  //获取栏目id  
    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>

    代码就基本上完成了,这里需要注意一下,模板里面必须要引入jquery库文件,另外catid 和next_no不能为空。大家赶快自己试试吧!

    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!