帝国cms滚动无限加载AJAX

想要自己加载得要涉及到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>

bazhepu永久会员

收藏 海报 链接