js实现分页加载更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页加载更多</title>
    <style>
        #content {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- 内容将在这里动态加载 -->
    </div>
    <button id="loadMore">加载更多</button>

    <script>
        const contentDiv = document.getElementById('content');
        const loadMoreButton = document.getElementById('loadMore');
        let currentPage = 1;
        const pageSize = 10;
        let allDataLoaded = false;

        function loadData(page) {
            // 模拟从服务器获取数据
            return new Promise((resolve) => {
                setTimeout(() => {
                    const data = [];
                    for (let i = 0; i < pageSize; i++) {
                        data.push(`内容 ${((page - 1) * pageSize) + i + 1}`);
                    }
                    resolve(data);
                }, 500);
            });
        }

        async function displayData() {
            const data = await loadData(currentPage);
            data.forEach(item => {
                const div = document.createElement('div');
                div.className = 'item';
                div.textContent = item;
                contentDiv.appendChild(div);
            });
            currentPage++;
        }

        contentDiv.addEventListener('scroll', () => {
            if (contentDiv.scrollTop + contentDiv.clientHeight >= contentDiv.scrollHeight - 10) {
                displayData();
            }
        });

        loadMoreButton.addEventListener('click', displayData);

        // 初始加载第一页数据
        displayData();
    </script>
</body>
</html>