js实现分页加载更多

基础概念

分页加载更多是一种常见的网页设计模式，用于提高用户体验和减少初始页面加载时间。它允许用户在浏览大量数据时，按需加载内容，而不是一次性加载所有数据。

类型

客户端分页：所有数据一次性加载到客户端，然后通过JavaScript进行分页显示。
服务器端分页：每次用户请求更多内容时，服务器只返回当前页的数据。

应用场景

新闻网站：用户可以滚动查看更多新闻。
社交媒体：如微博、朋友圈，用户可以不断下拉加载更多动态。
电商网站：商品列表可以分页显示，用户点击“加载更多”查看更多商品。

实现方法（JavaScript）

以下是一个简单的客户端分页加载更多的示例代码：

<!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>