6924查看/17回复/收藏

admin

2017-2-28 10:53:09

1#
此方法为页面滚动到指定位置ajax加载更多内容
在使用本代码前,需要获得应用页面已做好分页。
数据查询部分参考http://www.cmsbj.cn/dzdm/t435.html,此示例提供了dateline、views、replies、digest四种排序方式,未指定排序条件时默认dateline。
模板里做好require_once引用。
php里限定每次加载显示数量,jq里限定加载次数。

以下以forum.php改造调用帖子列表为例。部分内容需要支付贡献值。
首先,模板里先做好内容列表调用:
  1. <div class="articlelist">
  2.         <ul id="indexCustomerList">
  3.                 <!--{loop $manylist $value}-->
  4.                 <li class="transition" id="list_{$value['tid']}">
  5.                         <a href="forum.php?mod=viewthread&tid={$value['tid']}" title="{$value['subject']}" target="_blank">
  6.                                 <article>
  7.                                         <div class="customername"><span class="customerstatus">{$value['name']}</span></div>
  8.                                         <h2>{$value['subject']}</h2>
  9.                                         <p class="description">{$value['message']}...</p>
  10.                                         <p class="moremsg"><!--{echo dgmdate($value['dateline'], 'u', '9999', getglobal('setting/dateformat'))}--> 发布<span class="spanline">/</span>{$value['views']} 次阅读</p>
  11.                                         <div class="more_link">阅读原文</div>
  12.                                 </article>
  13.                         </a>
  14.                 </li>
  15.                 <!--{/loop}-->
  16.         </ul>
  17. </div>
  18. <div class="page-navigator">
  19.         <div id="loading">Loading...</div>        
  20. </div>
复制代码
此列表平白无奇,下面需要用到它的外部容器#indexCustomerList和加载中#loading。

接着,ajax加载下一页:
  1. <script type="text/javascript">
  2.   jQuery(function(){
  3.       var downrange = 0;
  4.       var num = $_G['page']+1;
  5.       var maxnum = num+10;
  6.       var main = jQuery("#indexCustomerList");
  7.       //var loaddiv = jQuery("#loading");
  8.       var totalheight = 0;
  9.       function ifLoad(){
  10.           var scrolltotop=parseFloat(jQuery(window).scrollTop());
  11.           var winheight = parseFloat(jQuery(window).height());
  12.           var conheight = parseFloat(jQuery(document).height())-downrange;
  13.           totalheight = scrolltotop + winheight;

  14.           if(totalheight >= conheight && num!=maxnum){
  15.               ajaxLoad(num);
  16.               num++;
  17.           }
  18.           else{
  19.                         jQuery("#loading").html("<div class='spinner'>END</div>");
  20.                 }
  21.       }

  22.       function ajaxLoad(page){
  23.           jQuery.ajax({
  24.               url:"forum.php?order={$order}",
  25.               type:"post",
  26.               data:{page:page,maxnum:maxnum},
  27.               success:function(data){
  28.                       var result = jQuery(data).find("#indexCustomerList li");
  29.                       main.append(result);
  30.               }
  31.           })
  32.       }

  33.             jQuery(document).ajaxStart(function(){
  34.           jQuery("#loading").html("<div class='spinner'><div class='rect1'></div><div class='rect2'></div><div class='rect3'></div><div class='rect4'></div><div class='rect5'></div></div>");
  35.       })
  36.         
  37.       jQuery(window).scroll(ifLoad);
  38.   })
  39. </script>
复制代码
其中jq代码中的$因冲突换成了jQuery。
[free]loading位置一串div是个css写的动画,不清楚兼容性,如果显示状况不佳可以换成固定gif图片。
补充上loading的css
  1. /* loading */
  2. .spinner{margin:0px auto;width: 50px;height: 60px;text-align: center;font-size: 10px;}
  3. .spinner > div{background-color: #67CF22;height: 100%;width: 6px;margin:0 2px;display: inline-block;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}
  4. .spinner .rect2{-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
  5. .spinner .rect3{-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
  6. .spinner .rect4{-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
  7. .spinner .rect5{-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
  8. @-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}
  9. 20%{-webkit-transform: scaleY(1.0)}}
  10. @keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}
  11. 20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}
复制代码
OK。

手机版JQ写法,以导读做首页为例
  1. <script type="text/javascript">
  2.   jQuery(function(){
  3.       var downrange = 0; //距离底部0时触发加载
  4.       var num = $_G['page']+1; //初次加载页数
  5.       var maxnum = num+10; //加载次数
  6.       var main = jQuery("#indexCustomerList");//列表容器
  7.       //var loaddiv = jQuery("#loading");
  8.       var totalheight = 0;
  9.       function ifLoad(){
  10.           var scrolltotop=parseFloat(jQuery(window).scrollTop());
  11.           var winheight = parseFloat(jQuery(window).height());
  12.           var conheight = parseFloat(jQuery(document).height())-downrange;
  13.           totalheight = scrolltotop + winheight;

  14.           if(totalheight >= conheight && num!=maxnum){
  15.               ajaxLoad(num);
  16.               num++;
  17.           }
  18.           else{
  19.                         jQuery("#loading").html("<div class='spinner'></div>");
  20.                 }
  21.       }

  22.       //ajax-fun
  23.       function ajaxLoad(page){
  24.           jQuery.ajax({
  25.               url:"forum.php?mod=guide&mobile=2&order={$order}",
  26.               type:"post",
  27.               data:{page:page,maxnum:maxnum},
  28.               success:function(data){
  29.                       var result = jQuery(data).find("#indexCustomerList li");
  30.                       main.append(result);
  31.               }
  32.           })
  33.       }

  34.             jQuery(document).ajaxStart(function(){
  35.           jQuery("#loading").html("<div class='spinner'><div class='rect1'></div><div class='rect2'></div><div class='rect3'></div><div class='rect4'></div><div class='rect5'></div></div>");
  36.       })/*.ajaxStop(function(){
  37.           jQuery("#loading").html("end");
  38.       })*/
  39.         
  40.       //scroll-fun
  41.       jQuery(window).scroll(ifLoad);

  42.   })
  43. </script>
复制代码
数据查询部分里,分页链接要改,和forum.php?mod=guide&mobile=2&order=$order

20171017 更新
修复了#loading 无法block/none的问题。(根据JQ库版本不同写法有区别),1.9+版本以后,ajax全局事件需绑定到document对象上才能触发。

20171019 更新
全文重新发布,指定加载时获取指定div位置,解决了原版需要单独做列表文件再加载,和加载出来的帖子无法实现伪静态的问题。
17 回帖

admin

2017-3-1 11:50:39

推荐
何日君再来 发表于 2017-3-1 10:28
url:"ajax_page.php",//加载的列表调用文件
是哪个文件呢

加载页面制作及数据查询见http://www.cmsbj.cn/dzdm/t425.html
挺长的,不重复贴了。
转载请注明出处。

何日君再来

2017-3-1 10:28:03

3#
url:"ajax_page.php",//加载的列表调用文件
是哪个文件呢

木头人

2017-3-24 08:14:27

4#
奇怪 怎么自动加载就不行呢?还是 js库没那个效果?

admin

2017-3-24 08:31:17

5#
木头人 发表于 2017-3-24 08:14
奇怪 怎么自动加载就不行呢?还是 js库没那个效果?

应该是jq的问题。
转载请注明出处。

tianshun518

2017-8-1 10:02:49

6#
好东西  超喜欢  超爱

合肥小子

2017-9-6 13:40:27

7#
为什么我按照 去年的那个方法,做了后,毫无反应,不管是首页的列表,还是帖子列表页,都没反应,跟模板有关系吗?

disnew

2017-9-12 18:21:59

8#
很好,谢谢了

第一次

2017-10-7 16:51:39

9#
这个能不能用到触屏版?

admin

2017-10-7 20:10:02

10#
第一次 发表于 2017-10-7 16:51
这个能不能用到触屏版?

什么版没区别,都是新加的东西。
转载请注明出处。
12下一页
您需要登录后才可以回帖 登录 | 注册
高级模式