最新公告
  • 欢迎您光临 我爱模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境! 立即加入钻石VIP
  • 帝国cms滚动无限加载AJAX

    正文概述 管理员   2025-09-04   6

    想要自己加载得要涉及到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=4;}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];}
     if((int)$_POST['next']>5){
         return;
     }
        // next:第几页
        // table:调用数据表
        // limit:每次调用数量
        // small_length:简介截取字符数
        // length:标题截取字符数
        // classid:调用栏目,允许多个,如1,2,3,4  特别注意,必须是调用同一数据表的栏目
        // orderby:排序,默认是newstime,传什么就按什么来排序,如 id
        // myorder:正反序,默认是asc,传值怎为desc
    
        $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[mtitlepic] == '') {
                    $r[mtitlepic] = $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];
                $urls = sys_ReturnBqTitleLink($r);
    
                ?>
                <!-- 以下代码是显示列表的标签模板 ,按照情景修改即可。-->				
    			<div class="article-list">
              <div class="img-article">
                <div class="article">
                  <h4 class="fn"><a target="_blank" class="fc0 f18 ah1 ellipsis" href="<?=$r[titleurl]?>"><?=$r[title]?></a> </h4>
                  <p class="des"><a target="_blank" class="wbwr f14 fc6" href="<?=$r[titleurl]?>"><?=$r[smalltext]?></a> </p>
                  <p class="time f12 fc9"><?=date('Y-m-d',$r[newstime])?></p>
                </div>
              </div>
            </div> 				
    							
    							
    <?php
            }
        }
    }
    db_close();
    $empire = null;
    ?>

    第二步

    无限加载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: '/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="/skin/bazhepu/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)
                }
            });
        });
    });

    第三步

    要在 HTML 加入代码:

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


    我爱模板网 » 帝国cms滚动无限加载AJAX

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者
    script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?587cc1e5c052b5b0ce99533beff13c96"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();

    请选择支付方式

    ×
    支付宝支付
    余额支付
    ×
    微信扫码支付 0 元