找回密码
 立即注册
搜索

    途迹耕耘

    Powered by Discuz! X3.5

    © 2001-2024 Discuz! Team.

    GMT+8, 2025-12-22 04:13 , Processed in 0.152476 second(s), 14 queries .

    返回列表 发新帖

    [DZ教程] discuz 3.2 首页ajax点击加载更多(最简版)

    [复制链接]
    bdk 发表于 2020-5-2 11:52:47 | 显示全部楼层 |阅读模式
    非diy，查询数据库获得数据，带分页，带加载更多按钮。
    以文章列表为例：
    数据查询部分
    1. //首页文章主列表
    2. $aids='56,63,68';//不调用的栏目，多个用半角逗号分开
    3. $article_messagelength='500';//内容字数
    4. $article_num=2;
    5. $article_begin=($_G['page']-1)*$article_num;
    6. $article_manylist=array();
    7. require_once libfile('function/post');
    8. $article_rs=DB::query("SELECT a.*,a.title as atitle,b.*,c.* FROM ".DB::table("portal_article_title")." a LEFT JOIN ".DB::table("portal_article_content")." b on b.aid=a.aid LEFT JOIN ".DB::table("portal_article_count")." c on c.aid=a.aid WHERE a.`aid` NOT in ($aids) and a.status=0 group by a.aid ORDER BY b.`dateline` DESC LIMIT $article_begin , $article_num");
    9. while ($article_rw=DB::fetch($article_rs)) {
    10.         $article_rw['content']=messagecutstr($article_rw['content'],$article_messagelength,'');
    11.         $article_rw['content']=dhtmlspecialchars($article_rw['content']);
    12.         $article_manylist[]=$article_rw;
    13. }
    14. $article_allnum=DB::result_first("select count(*) from ".DB::table("portal_article_title")." where aid NOT in ($aids) and `status`=0");
    15. $article_pagenav=multi($article_allnum,$article_num,$_G['page'],"portal.php");
    16. $article_ntpage=$_G['page']+1;
    17. $article_fynum=ceil($article_allnum/$article_num);
    复制代码
    模板调用部分
    1. <ul class="article-list tab-list active" id="article-list">
    2. <!--{loop $article_manylist $value}-->
    3. <li id="list_{$value['aid']}" class="item">
    4. <div class="item-img">
    5. <a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">
    6. <img src="data/attachment/{$value['pic']}" width="480" height="320" alt="{$value['atitle']}">
    7. </a>
    8. <a class="item-category" href="forum.php?mod=forumdisplay&fid={$value['aid']}" target="_blank">{$value['name']}</a>
    9. </div>
    10. <div class="item-content">
    11. <h2 class="item-title"><a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">{$value['atitle']}</a></h2>
    12. <div class="item-excerpt">
    13. <p>{$value['content']}</p>
    14. </div>
    15. <div class="item-meta">
    16. <div class="item-meta-li author">
    17. <a data-user="4" target="_blank" href="#" class="avatar">
    18. <img src="uc_server/avatar.php?uid={$value['uid']}&size=small" width="30" height="30" alt="{$value['username']}"/>
    19. </a>
    20. <a class="nickname" href="#" target="_blank">{$value['username']}</a>
    21. </div>
    22. <span class="item-meta-li date">10分钟前</span>
    23. <span class="item-meta-li views" title="阅读"><i class="fa fa-eye"></i> <span class="data">{$value['viewnum']}</span></span>
    24. <span class="item-meta-li likes" title="分享"><i class="fa fa-thumbs-up"></i> <span class="data">{$value['sharetimes']}</span></span>
    25. <a class="item-meta-li comments" href="#" target="_blank" title="评论"><i class="fa fa-comment"></i><span class="data">{$value['commentnum']}</span></a>
    26. <span class="item-meta-li hearts" title="收藏"><i class="fa fa-heart"></i><span class="data">{$value['favtimes']}</span></span>
    27. </div>
    28. </div>
    29. </li>
    30. <!--{/loop}-->
    31. </ul>
    32. <div class="load-more-wrap">
    33. <a class="load-more" href="javascript:;" rel="portal.php?&page={$article_ntpage}" curpage="{$_G['page']}" id="autopbn" totalpage="{$article_fynum}" picstyle="$_G[forum][picstyle]" forumdefstyle="$_G[cookie][forumdefstyle]">加载更多+</a>
    34. <script type="text/javascript" src="{$_G[style][styleimgdir]}/js/indexloadpage.js?{VERHASH}"></script>
    35. </div>
    36. <div class="mt cl">
    37. <div id="fd_page_bottom">{$article_pagenav}</div>
    38. </div>
    复制代码
    indexloadpage.js部分
    1. /*
    2.         [Discuz!] ajaxlist
    3. */

    5. (function() {

    7.         var autopbn = $('autopbn');
    8.         var nextpageurl = autopbn.getAttribute('rel').valueOf();
    9.         var curpage = parseInt(autopbn.getAttribute('curpage').valueOf());
    10.         var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf());
    11.         var picstyle = parseInt(autopbn.getAttribute('picstyle').valueOf());
    12.         var forumdefstyle = parseInt(autopbn.getAttribute('forumdefstyle').valueOf());
    13.         picstyle = picstyle && !forumdefstyle;
    14.         var autopagenum = 0;
    15.         var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum);

    17.         var loadstatus = 0;

    19.         autopbn.onclick = function() {
    20.                 var oldloadstatus = loadstatus;
    21.                 loadstatus = 2;
    22.                 autopbn.innerHTML = '正在加载, 请稍后...';
    23.                 getnextpagecontent();
    24.                 loadstatus = oldloadstatus;
    25.         };

    27.         if(autopagenum > 0) {
    28.                 window.onscroll = function () {
    29.                         var curtop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    30.                         if(curtop + document.documentElement.clientHeight + 500 >= document.documentElement.scrollHeight && !loadstatus) {
    31.                                 loadstatus = 1;
    32.                                 autopbn.innerHTML = '正在加载, 请稍后...';
    33.                                 setTimeout(getnextpagecontent, 1000);
    34.                         }
    35.                 };
    36.         }

    38.         function getnextpagecontent() {

    40.                 if(curpage + 1 > totalpage) {
    41.                         window.onscroll = null;
    42.                         autopbn.style.display = 'none';
    43.                         return;
    44.                 }
    45.                 if(loadstatus != 2 && curpage + 1 > maxpage) {
    46.                         autopbn.innerHTML = '下一页 &#65533;0&#65533;3';
    47.                         if(curpage + 1 > maxpage) {
    48.                                 window.onscroll = null;
    49.                         }
    50.                         return;
    51.                 }
    52.                 curpage++;
    53.                 var url = nextpageurl + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    54.                 var x = new Ajax('HTML');
    55.                 x.get(url, function (s) {
    56.                         s = s.replace(/\n|\r/g, '');
    57.                         if(s.indexOf("id="autopbn"") == -1) {
    58.                                 $("autopbn").style.display = "none";
    59.                                 window.onscroll = null;
    60.                         }

    62.                         if(!picstyle) {
    63.                                 var tableobj = $('article-list');
    64.                                 var nexts = s.match(/\<li id="list_(\d+)" class="item"\>(.+?)\<\/li>/g);
    65.                                 for(i in nexts) {
    66.                                         if(i == 'index' || i == 'lastIndex') {
    67.                                                 continue;
    68.                                         }
    69.                                         var insertid = nexts[i].match(/<li id="list_(\d+)" class="item"\>/);
    70.                                         if(!$('list_' + insertid[1])) {

    72.                                                 var newbody = document.createElement('li');
    73.                                                 tableobj.appendChild(newbody);
    74.                                                 var div = document.createElement('ul');
    75.                                                 div.innerHTML = '<ul>' + nexts[i] + '</ul>';
    76.                                                 tableobj.replaceChild(div.childNodes[0].childNodes[0], tableobj.lastChild);
    77.                                         }
    78.                                 }
    79.                         } else {
    80.                                 var nexts = s.match(/\<li style="width:\d+px;" id="picstylethread_(\d+)"\>(.+?)\<\/li\>/g);
    81.                                 for(i in nexts) {
    82.                                         var insertid = nexts[i].match(/id="picstylethread_(\d+)"\>/);
    83.                                         if(!$('picstylethread_' + insertid[1])) {
    84.                                                 $('threadlist_picstyle').innerHTML += nexts[i];
    85.                                         }
    86.                                 }
    87.                         }
    88.                         var pageinfo = s.match(/\<div id="fd_page_bottom"\>(.+?)\<\/div\>/);
    89.                         nextpageurl = nextpageurl.replace(/&page=\d+/, '&page=' + (curpage + 1));

    91.                         $('fd_page_bottom').innerHTML = pageinfo[1];
    92.                         if(curpage + 1 > totalpage) {
    93.                                 autopbn.style.display = 'none';
    94.                         } else {
    95.                                 autopbn.innerHTML = '下一页 &#65533;0&#65533;3';
    96.                         }
    97.                         loadstatus = 0;
    98.                 });
    99.         }

    101. })();
    复制代码
    说明：
    数据查询说明
    $article_num——每页数量；
    $article_manylist——数组；
    $article_allnum——文章总数；
    $article_pagenav——分页代码，含html；
    $article_ntpage——下一页页码；
    $article_fynum——总页数。

    模板调用说明
    1.列表外层容器id=article-list，要与js里一致；
    2.列表本身容器id="list_xx"前缀要与js里一致；
    3.加载按钮（id="autopbn"行）要放到id=article-list容器之外；
    4.分页代码$article_pagenav外容器要有id="fd_page_bottom"，标签要与js里一致。

    js代码说明
    var tableobj = $('article-list');//列表外部容器id
    var nexts = s.match(/\<li id="list_(\d+)" class="item"\>(.+?)\<\/li>/g);//列表本身容器，class要写全，且id和class前后顺序必须与网页源代码里显示一致。
    var newbody = document.createElement('li');//列表本身容器元素标签。
    div.innerHTML = '<ul>' + nexts + '</ul>';列表外部容器元素标签。
    var pageinfo = s.match(/\<div id="fd_page_bottom"\>(.+?)\<\/div\>/);//分页代码外部容器id。

    回复

    举报

    返回列表 发新帖