首页 教程Discuz正文

Discuz! X 3.2 首页ajax点击加载更多(最简版)

非diy,查询数据库获得数据,带分页,带加载更多按钮。以文章列表为例:数据查询部分//首页文章主列表 $aids='56,63,68';//不调用的栏目,多个用半角逗号分开 $ar

非diy,查询数据库获得数据,带分页,带加载更多按钮。

以文章列表为例:

数据查询部分

//首页文章主列表
$aids='56,63,68';//不调用的栏目,多个用半角逗号分开
$article_messagelength='500';//内容字数
$article_num=2;
$article_begin=($_G['page']-1)*$article_num;
$article_manylist=array();
require_once libfile('function/post');
$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");
while ($article_rw=DB::fetch($article_rs)) {
        $article_rw['content']=messagecutstr($article_rw['content'],$article_messagelength,'');
        $article_rw['content']=dhtmlspecialchars($article_rw['content']);
        $article_manylist[]=$article_rw;
}
$article_allnum=DB::result_first("select count(*) from ".DB::table("portal_article_title")." where aid NOT in ($aids) and `status`=0");
$article_pagenav=multi($article_allnum,$article_num,$_G['page'],"portal.php");
$article_ntpage=$_G['page']+1;
$article_fynum=ceil($article_allnum/$article_num);

模板调用部分

<ul class="article-list tab-list active" id="article-list">
<!--{loop $article_manylist $value}-->
<li id="list_{$value['aid']}" class="item">
<div class="item-img">
<a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">
<img src="data/attachment/{$value['pic']}" width="480" height="320" alt="{$value['atitle']}">
</a>
<a class="item-category" href="forum.php?mod=forumdisplay&fid={$value['aid']}" target="_blank">{$value['name']}</a>
</div>
<div class="item-content">
<h2 class="item-title"><a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">{$value['atitle']}</a></h2>
<div class="item-excerpt">
<p>{$value['content']}</p>
</div>
<div class="item-meta">
<div class="item-meta-li author">
<a data-user="4" target="_blank" href="#" class="avatar">
<img src="uc_server/avatar.php?uid={$value['uid']}&size=small" width="30" height="30" alt="{$value['username']}"/>
</a>
<a class="nickname" href="#" target="_blank">{$value['username']}</a>
</div>
<span class="item-meta-li date">10分钟前</span>
<span class="item-meta-li views" title="阅读"><i class="fa fa-eye"></i> <span class="data">{$value['viewnum']}</span></span>
<span class="item-meta-li likes" title="分享"><i class="fa fa-thumbs-up"></i> <span class="data">{$value['sharetimes']}</span></span>
<a class="item-meta-li comments" href="#" target="_blank" title="评论"><i class="fa fa-comment"></i><span class="data">{$value['commentnum']}</span></a>
<span class="item-meta-li hearts" title="收藏"><i class="fa fa-heart"></i><span class="data">{$value['favtimes']}</span></span>
</div>
</div>
</li>
<!--{/loop}-->
</ul>
<div class="load-more-wrap">
<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>
<script type="text/javascript" src="{$_G[style][styleimgdir]}/js/indexloadpage.js?{VERHASH}"></script>
</div>
<div class="mt cl">
<div id="fd_page_bottom">{$article_pagenav}</div>
</div>

indexloadpage.js部分

/*
        [Discuz!] ajaxlist
*/

(function() {

        var autopbn = $('autopbn');
        var nextpageurl = autopbn.getAttribute('rel').valueOf();
        var curpage = parseInt(autopbn.getAttribute('curpage').valueOf());
        var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf());
        var picstyle = parseInt(autopbn.getAttribute('picstyle').valueOf());
        var forumdefstyle = parseInt(autopbn.getAttribute('forumdefstyle').valueOf());
        picstyle = picstyle && !forumdefstyle;
        var autopagenum = 0;
        var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum);

        var loadstatus = 0;

        autopbn.onclick = function() {
                var oldloadstatus = loadstatus;
                loadstatus = 2;
                autopbn.innerHTML = '正在加载, 请稍后...';
                getnextpagecontent();
                loadstatus = oldloadstatus;
        };

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

        function getnextpagecontent() {

                if(curpage + 1 > totalpage) {
                        window.onscroll = null;
                        autopbn.style.display = 'none';
                        return;
                }
                if(loadstatus != 2 && curpage + 1 > maxpage) {
                        autopbn.innerHTML = '下一页 »';
                        if(curpage + 1 > maxpage) {
                                window.onscroll = null;
                        }
                        return;
                }
                curpage++;
                var url = nextpageurl + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
                var x = new Ajax('HTML');
                x.get(url, function (s) {
                        s = s.replace(/\n|\r/g, '');
                        if(s.indexOf("id="autopbn"") == -1) {
                                $("autopbn").style.display = "none";
                                window.onscroll = null;
                        }

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

                                                var newbody = document.createElement('li');
                                                tableobj.appendChild(newbody);
                                                var div = document.createElement('ul');
                                                div.innerHTML = '<ul>' + nexts[i] + '</ul>';
                                                tableobj.replaceChild(div.childNodes[0].childNodes[0], tableobj.lastChild);
                                        }
                                }
                        } else {
                                var nexts = s.match(/\<li style="width:\d+px;" id="picstylethread_(\d+)"\>(.+?)\<\/li\>/g);
                                for(i in nexts) {
                                        var insertid = nexts[i].match(/id="picstylethread_(\d+)"\>/);
                                        if(!$('picstylethread_' + insertid[1])) {
                                                $('threadlist_picstyle').innerHTML += nexts[i];
                                        }
                                }
                        }
                        var pageinfo = s.match(/\<div id="fd_page_bottom"\>(.+?)\<\/div\>/);
                        nextpageurl = nextpageurl.replace(/&page=\d+/, '&page=' + (curpage + 1));

                        $('fd_page_bottom').innerHTML = pageinfo[1];
                        if(curpage + 1 > totalpage) {
                                autopbn.style.display = 'none';
                        } else {
                                autopbn.innerHTML = '下一页 »';
                        }
                        loadstatus = 0;
                });
        }

})();

说明:

数据查询说明

$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。

共收到 0 条回复

访客访客