移动端实现下拉刷新和上拉加载（内含案例）

devtools/2024/10/18 16:48:50/

在前端开发中，上拉加载和下拉刷新常用于实现内容的动态加载，尤其在移动端的应用中。下面我将提供一个简单的示例和逻辑说明。

1. 逻辑说明：

下拉刷新：
- 用户向下拖动页面顶部，触发一个事件，刷新当前内容。
- 需要检测页面的 scrollTop 为 0 时的拖动行为。
上拉加载：
- 用户滚动到页面底部时，触发数据加载事件，加载更多内容。
- 需要检测页面的 scrollHeight 和 clientHeight 之间的距离接近为 0 时的滚动行为。

2. 案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>上拉加载 & 下拉刷新</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}#content {height: 100vh;overflow-y: auto;}.item {padding: 20px;border-bottom: 1px solid #ccc;}.loading {text-align: center;padding: 20px;display: none;}</style>
</head>
<body><div id="content"><div id="items"></div><div class="loading" id="loading">加载中...</div></div><script>javascript">const content = document.getElementById('content');const items = document.getElementById('items');const loading = document.getElementById('loading');// 模拟初始内容加载let page = 1;function loadItems() {for (let i = 0; i < 10; i++) {const div = document.createElement('div');div.className = 'item';div.innerText = 'Item ' + (items.children.length + 1);items.appendChild(div);}}loadItems();// 下拉刷新let startY = 0;content.addEventListener('touchstart', (e) => {if (content.scrollTop === 0) {startY = e.touches[0].pageY;}});content.addEventListener('touchmove', (e) => {const moveY = e.touches[0].pageY;if (moveY - startY > 100 && content.scrollTop === 0) {// 模拟刷新操作alert('刷新页面');items.innerHTML = '';loadItems();}});// 上拉加载更多content.addEventListener('scroll', () => {if (content.scrollTop + content.clientHeight >= content.scrollHeight) {loading.style.display = 'block';setTimeout(() => {loadItems();loading.style.display = 'none';}, 1000); // 模拟加载延迟}});</script>
</body>
</html>

3. 逻辑详细说明：

下拉刷新：
- 通过 touchstart 获取用户的起始触摸点，并在 touchmove 事件中判断是否有下拉行为（页面滚动条处于顶部时）。
- 一旦检测到下拉超过一定距离（如100px），执行刷新操作，如重新加载页面内容。
上拉加载：
- 通过 scroll 事件监测用户的滚动行为，检测当前滚动条位置是否接近页面底部。
- 当 scrollTop + clientHeight 等于或超过 scrollHeight 时，触发加载更多内容的操作，显示“加载中”提示，并在短暂延迟后加载更多数据。