滚动刷新功能-架构-ONE

评论
7 views

要实现每查询出50条数据就刷新页面，直到所有数据都显示出来，可以采用分页加载或分批加载的方式。以下是一个常见的实现思路：

1. 后端分页查询

后端API支持分页查询，前端每次请求50条数据，直到所有数据加载完毕。

后端API设计

  • 请求参数：
  • page: 当前页码
  • pageSize: 每页数据量（例如50）
  • 响应数据：
  • data: 当前页的数据
  • total: 总数据量
  • page: 当前页码
  • pageSize: 每页数据量

前端实现

  1. 初始化请求：首次请求第一页数据。
  2. 递归或循环请求：根据总数据量和当前已加载的数据量，判断是否需要继续请求下一页。
  3. 更新页面：每次获取到新数据后，更新页面显示。
let currentPage = 1;
const pageSize = 50;
let totalData = [];

function fetchData(page) {
    fetch(`/api/data?page=${page}&pageSize=${pageSize}`)
        .then(response => response.json())
        .then(data => {
            // 将新数据添加到总数据中
            totalData = totalData.concat(data.data);

            // 更新页面显示
            updateUI(totalData);

            // 判断是否还有更多数据需要加载
            if (totalData.length < data.total) {
                // 继续加载下一页
                currentPage++;
                fetchData(currentPage);
            } else {
                console.log('所有数据加载完毕');
            }
        })
        .catch(error => {
            console.error('数据加载失败:', error);
        });
}

function updateUI(data) {
    // 更新页面显示的逻辑
    // 例如：将数据渲染到表格或列表中
    const container = document.getElementById('data-container');
    container.innerHTML = ''; // 清空当前内容
    data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.name; // 假设每条数据有name字段
        container.appendChild(element);
    });
}

// 开始加载数据
fetchData(currentPage);

2. 前端分批加载

如果后端不支持分页查询，前端可以在获取到所有数据后，分批渲染到页面上。

前端实现

  1. 一次性获取所有数据：从API获取全部3000条数据。
  2. 分批渲染：每次渲染50条数据，使用setTimeout或requestAnimationFrame来控制渲染频率，避免页面卡顿。
let allData = [];
let currentIndex = 0;
const batchSize = 50;

function fetchAllData() {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            allData = data;
            renderBatch();
        })
        .catch(error => {
            console.error('数据加载失败:', error);
        });
}

function renderBatch() {
    const endIndex = Math.min(currentIndex + batchSize, allData.length);
    const batchData = allData.slice(currentIndex, endIndex);

    // 更新页面显示
    updateUI(batchData);

    // 判断是否还有更多数据需要渲染
    if (endIndex < allData.length) {
        currentIndex = endIndex;
        setTimeout(renderBatch, 100); // 控制渲染频率，避免页面卡顿
    } else {
        console.log('所有数据渲染完毕');
    }
}

function updateUI(data) {
    // 更新页面显示的逻辑
    const container = document.getElementById('data-container');
    data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.name; // 假设每条数据有name字段
        container.appendChild(element);
    });
}

// 开始加载数据
fetchAllData();

3. 使用虚拟滚动

如果数据量非常大（例如上万条），可以考虑使用虚拟滚动技术，只渲染当前可见区域的数据，而不是一次性渲染所有数据。

虚拟滚动库

总结

  • 后端分页查询：适合后端支持分页的场景，前端分批请求数据。
  • 前端分批加载：适合后端不支持分页的场景，前端一次性获取数据后分批渲染。
  • 虚拟滚动：适合数据量非常大的场景，只渲染可见区域的数据。

根据你的具体需求和技术栈选择合适的方案。