您好,欢迎来到菜鸟吧源码网-本站资源仅供学习与参考,禁止用于商业或违法行为!
  • 首 页
  • 下载APP
  • 公告:菜鸟吧APP于2024.9.15正式上线,请首页右上角进入下载,本站资源均来源于互联网及会员投稿发布,所有资源仅供学习参考研究使用,请勿商用或其它非法用途,商用请购买正版,否则产生一切后果由用户自行承担!谢谢!

     

    当前位置:主页 > 站长学堂 > dede教程 >
    织梦DedeCMS列表实现无限加载并且不影响静态页生成与访问的方法
    时间:2020-02-28 12:03 作者:菜鸟哥 浏览:收藏 挑错 打印

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

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

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


    1<div class="list">
    2<ul>
    3<li><a href="">列表简单的dom结构</a></li>
    4</ul>
    5</div>

    分页按钮样式:
    1<!-- data-catid的值为当前栏目iddata-list是当前模版列表特殊样式 -->
    2<div class="list_next"data-catid="{dede:field.id/}"data-list="">
    3<a href="javascript:;">下一页</a></div>
    4<div class="list_load"></div>

    JS请求的代码如下:
    01<script type="text/javascript">
    02var catid = $(".list_next").data("catid");  //获取栏目id
    03var cur_list = $(".list_next").data("list") == "列表样式2"? "列表样式2": ".list";    //列表样式
    04var next_no = 2;    //分页数
    05var path_arr = window.location.pathname.split("/");  
    06var file= path_arr[path_arr.length-1];  
    07if(file!= "index.html"&& file!= ""){   next_no = parseInt(file.split(".")[0].split("-")[1]) + 1;    }  
    08$(".list_next a").click(function(){      
    09var _this = $(this);      
    10_this.html("正在加载中...");   //给定按钮临时加载状态  
    11$(".list_load").load("./"+catid+"-"+next_no+".html?now="+new Date().getTime()+" "+cur_list+" ul", function(data , status){          
    12if(status == "success"){              
    13if($(".list_load").html().indexOf("li")<0){                  
    14_this.html("没有更多内容了");                  
    15_this.css("background-color", "#888");                  
    16_this.unbind("click");} else{                  
    17_this.html("下一页");                  
    18$(cur_list+" ul").append($(".list_load ul").html());                  
    19next_no++;}          
    20} else{              
    21_this.html("没有更多内容了");              
    22_this.css("background-color", "#888");              
    23_this.unbind("click");            }        });    });
    24</script>

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

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。
    如有侵犯您的版权,请给我们来信:cainiaovip8@qq.com,我们尽快处理。

    织梦中TAG标签字数长度限制解决方法织梦中TAG标签字数长度限制解决方法
    织梦后台突然打不开或打开后空白的解决方法织梦后台突然打不开或打开后空白的解决
    织梦系统解决后台“DEDECMS安全提示”的方法织梦系统解决后台“DEDECMS安全提示”