瓦窑源码 快速建站好帮手
客服QQ客服QQ 微信号微信号

织梦dedecms如何实现列表页无限加载

本文介绍了织梦dedecms如何实现列表页无限加载,需要使用Jquery.load()方法来要求下一页无限加载列表页面,教程给出了具体的代码,直接放到模板使用吧。

织梦网站源码

织梦dedecms如何实现列表页无限加载?许多朋友在建站过程中,尤其是新闻网站和图片网站,需要使用无限加载列表。以下是如何实现这一功能,不影响列表静态页面的生成。

具体代码:

列表页简单的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不能为空。

以上就是关于织梦无限加载的所有内容,希望可以帮到大家,欢迎扫码加微信一起交流~

微信公众号

TAG标签:织梦无限加载

上一个:织梦dedecms如何实现调取某个时间段的文章
下一个:最后一页

瓦窑源码专注织梦网站源码与静态模板分享,提供织梦模板,dedecms模板,织梦企业源码,dedecms商业源码和织梦免费模板下载

织梦源码 - 织梦模板 - 网页素材 - 织梦教程 - 站长学院 - 热门排行 - Tags标签 - 网站地图 - 免责声明

Copyright©2021 瓦窑源码 Why114.COM 版权所有 鲁ICP备20017802号-2

客服QQ:1847629575 微信号:qilujianzhan

展开