您现在的位置是: 主页 > 个人博客日记 > 程序人生 > 程序人生

{80后}织梦模板列表页实现无限加载的教程

2019-07-02 10:32 【程序人生】 人已围观

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

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


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


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

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

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

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

孟文鹏博客版权所有丨如未注明 , 均为原创丨 转载请注明{80后}织梦模板列表页实现无限加载的教程

很赞哦! ( )

随机图文

文章评论

    总共有: 条评论 来说两句吧...

    用户名:

    联系方式:

猜你喜欢

站点信息

  • 建站时间 :2019-6-18
  • 共有会员 : 2名
  • 共有文章 :2919篇
  • 今日更新 :22篇
  • 百度收录
  • 文章阅读 :401668人次
  • 公众号 :扫描二维码,关注我们