在前端开发中，上拉加载和下拉刷新常用于实现内容的动态加载，尤其在移动端的应用中。下面我将提供一个简单的示例和逻辑说明。
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时，触发加载更多内容的操作，显示“加载中”提示，并在短暂延迟后加载更多数据。
- 通过
这种实现方式适用于简单的内容列表，可以根据需求调整加载条件与显示样式。
