在开始之前,你需要确保已经安装好帝国 CMS 系统,同时熟悉基本的 HTML、CSS、JavaScript、PHP 以及 MySQL 相关知识。

前端部分

1. HTML 结构

首先,在你需要实现下拉加载更多功能的页面中,创建一个用于显示内容的容器和一个加载提示元素。示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帝国CMS下拉加载更多</title>
    <style>
        #content-container {
            /* 可根据实际需求设置样式 */
        }
        #loading {
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div id="content-container">
        <!-- 已有内容会显示在这里 -->
    </div>
    <div id="loading">正在加载更多内容...</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="load_more.js"></script>
</body>
</html>

2. JavaScript 逻辑(load_more.js


使用 jQuery 监听页面滚动事件,当滚动到底部时,触发加载更多内容的请求。示例代码如下:
$(document).ready(function() {
    var page = 1; // 初始页码
    var isLoading = false; // 标记是否正在加载数据

    // 监听滚动事件
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 &&!isLoading) {
            // 滚动到底部且不在加载中时,触发加载更多
            loadMoreContent();
        }
    });

    function loadMoreContent() {
        isLoading = true;
        $('#loading').show(); // 显示加载提示

        $.ajax({
            url: 'get_more_content.php',
            type: 'GET',
            data: { page: page + 1 },
            success: function(response) {
                if (response.length > 0) {
                    page++; // 页码加 1
                    $('#content-container').append(response); // 将新内容追加到容器中
                } else {
                    // 没有更多内容,隐藏加载提示
                    $('#loading').hide();
                    $(window).off('scroll'); // 移除滚动监听
                }
                isLoading = false;
                $('#loading').hide(); // 隐藏加载提示
            },
            error: function() {
                alert('加载失败,请稍后重试');
                isLoading = false;
                $('#loading').hide(); // 隐藏加载提示
            }
        });
    }
});

后端部分

1. 数据库查询


在帝国 CMS 中,内容数据通常存储在 phome_ecms_ 开头的表中。我们需要根据前端传递的页码,从数据库中查询相应的数据。

2. PHP 脚本(get_more_content.php

 
<?php
// 引入帝国CMS核心文件
require_once('e/class/connect.php');
require_once('e/class/db_sql.php');
require_once('e/data/dbcache/class.php');

$link = db_connect();
$empire = new mysqlquery();

$page = intval($_GET['page']); // 获取页码
$perPage = 10; // 每页显示的记录数
$start = ($page - 1) * $perPage; // 计算起始位置

// 构建 SQL 查询语句,这里以新闻表为例
$sql = "SELECT title, newstime FROM phome_ecms_news WHERE checked = 1 LIMIT $start, $perPage";
$result = $empire->query($sql);

$html = '';
while ($row = $empire->fetch($result)) {
    $html .= '<div class="article">';
    $html .= '<h2>' . $row['title'] . '</h2>';
    $html .= '<p>发布时间:' . date('Y-m-d H:i:s', $row['newstime']) . '</p>';
    $html .= '</div>';
}

echo $html;

db_close();
$empire = null;
?>

注意事项

 
  • 性能优化:为了提高查询效率,建议在数据库表的相关字段上创建索引,如 checkednewstime 等。
  • 安全性:对前端传递的参数进行严格的验证和过滤,防止 SQL 注入等安全问题。在上述代码中,使用 intval() 函数将页码参数转换为整数类型。
  • 错误处理:在后端脚本中添加详细的错误处理机制,确保在出现数据库查询错误等异常情况时能够返回合适的错误信息。

通过以上步骤,你就可以在帝国 CMS 中实现下拉加载更多的功能。