帝国cms 列表下拉滚动自动加载更多文章的方法

2023-05-12 0 627

想要自己加载得要涉及到PHP+JQ+AJAX:

第一步:新建个php代码get_news_index.php 上传到 /e/action:

<?php
require('../class/connect.php');
require('../class/db_sql.php');
require('../data/dbcache/class.php');
if($_POST[action] == 'getmorenews'){
$table=htmlspecialchars($_POST[table]);
if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}
if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}
if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];}
if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}
if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}
if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];}
$link=db_connect();
$empire=new mysqlquery();
$num =(int)$_POST['next'] *$limit;
if($table){
$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");
while($r=$empire->fetch($sql)){
if($r[titlepic]==''){
$r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";
}
$oldtitle=stripSlashes($r[title]);
$title=sub($oldtitle,'',$length);
$smalltext=stripSlashes($r[smalltext]);
$smalltext=sub($smalltext,'',$small_length);
$classname=$class_r[$r[classid]][classname];
$newsurl=$public_r[newsurl];
$classurl=$newsurl.$class_r[$r[classid]][classpath];
?>
<article class="excerpt excerpt-one" data-id="<?=$r[classid]?>">
<header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> " rel="external nofollow" ><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a>
<h2><a href="<?=$r[titleurl]?>" rel="external nofollow"  rel="external nofollow"  title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2>
<small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header>
<p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p>
<p class="focus"><a href="<?=$r[titleurl]?>" rel="external nofollow"  rel="external nofollow"  class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p>
<p class="note"><?=$smalltext?>...</p>
<p class="text-muted views">
<span class="post-views">阅读(<?=$r[onclick]?>)</span>
<span class="post-comments">评论(<?=$r[plnum]?>)</span><a href="JavaScript:makeRequest('<?=$public_r[news.url]?>e/public/digg?classid=<?=$r[classid]?>&id=<?=$r[id]?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$r[id]?>','EchoReturnedText','GET','');" rel="external nofollow"  class="post-like" ><i class="glyphicon glyphicon-thumbs-up"></i>赞 (<span id="diggnum<?=$r[id]?>"><?=$r[diggtop]?></span>)</a>
<span class="post-tags">标签:<a href="/337/e/tags/?tagname=<?=stripSlashes($r[keyboard])?>" rel="external nofollow"  target="_blank" rel="tag" data-original-title><?=stripSlashes($r[keyboard])?></a></span></p>
</article>
//这部分代码添加自己的模板代码
<?php
}
}
}
db_close();
$empire=null;
?>

第二步要写js代码  ajaxShow.js:

$(function() {
    var i =0; //设置当前页数
    if (!NeuF) var NeuF = {};
    NeuF.ScrollPage = function (obj, options, callback) {
        var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottom
        options = $.extend(_defaultOptions, options);
        this.isScrolling = false; //是否在滚动
        this.oriPos = 0; //原始位置
        this.curPos = 0; //当前位置
        var me = this; //顶层
        var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
        //绑定滚动事件
        $obj.scroll(function (ev) {
            me.curPos = $obj.scrollTop();
            if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
                if (me.isScrolling == true) return;
                me.isScrolling = true;
                setTimeout(function () {
                    me.isScrolling = false;
                }, options.delay);   //重复触发间隔毫秒
                if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
            }
            ;
            me.oriPos = me.curPos;
        });
    };
    $(function () {
        window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
        function show() {
            $.ajax({
                url: 'http://www.****.com/e/action/get_news_index.php',//自己的域名
                type: 'POST',
                data: {
                    "next": i,
                    'table': 'news',
                    'action': 'getmorenews',
                    'limit': 10,
                    'small_length': 120
                },
                dataType: 'html',
                beforeSend: function () {
                    $("#loadmore").show().html('<img  src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...');
 
                    $('#loadmore').attr('disabled', 'disabled');
                },
                success: function (data) {
                    if (data) {
                        $("#showajaxnews").append(data);
 
                        $("#loadmore").removeAttr('disabled');
                        $("#loadmore").html('滚动加载更多');
                        i++;
                    } else {
                        $("#loadmore").show().html("已全部加载完毕!");
                        console.log(data);
                        $('#loadmore').attr('disabled', 'disabled');
                        return false;
                    }
                }
            });
 
        };
        show();
        //marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改
        new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) {
            if (offset > 0) {
                setTimeout(show,1000)
            }
        });
    });
});

第三步:要在 列表模板文件加入代码:

<div class=""  id="showajaxnews"> 列表加载这里面 </div>
<div class="more"  id="loadmore">滚动加载更多</div>

第四步:把more加载样式css加进去

.more{
    display: inline-block;
    padding: 10px 80px;
    text-decoration: none;
    background-color: #ff5f33;
    color: #fff !important;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 15px;
}

效果图一:

帝国cms 列表下拉滚动自动加载更多文章的方法

.more{
    display: none;
    padding: 10px 0px 25px 0px;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    font-size: 12px;
    color: #ccc;
}

效果二:

帝国cms 列表下拉滚动自动加载更多文章的方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!

我爱模板网 帝国cms教程 帝国cms 列表下拉滚动自动加载更多文章的方法 https://www.52muban.com/127800.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务