🪴qql1's digital garden

上划加载

2分钟阅读

高级

实现方式

  1. 使用JavaScript编写一个监听事件，当用户上划页面时触发加载更多内容的功能。
  2. 在页面底部设置一个触发器，当用户上划到该位置时，自动加载更多内容。
  3. 可以在加载过程中显示一个loading动画，提升用户体验。
  4. 可以设置一个阈值，当用户滑动到页面底部一定距离时才开始加载更多内容，避免频繁请求数据。

示例

<!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: 2000px; /* 长页面用于演示上划加载 */
}
.loading {
  text-align: center;
  margin-top: 20px;
}
</style>
</head>
<body>
<div id="content">
  <!-- 这里放置页面内容 -->
</div>
<div class="loading" style="display: none;">
  <img src="loading.gif" alt="Loading..."> 加载中...
</div>
 
<script>
let isLoading = false;
window.addEventListener('scroll', function() {
  let scrollPosition = window.scrollY + window.innerHeight;
  let contentHeight = document.getElementById('content').offsetHeight;
 
  if (scrollPosition >= contentHeight && !isLoading) {
    isLoading = true;
    document.querySelector('.loading').style.display = 'block';
    
    // 模拟异步加载数据
    setTimeout(function() {
      // 这里可以通过Ajax请求数据，然后将内容添加到页面中
      document.getElementById('content').innerHTML += '<p>加载的内容...</p>'.repeat(5);
      
      isLoading = false;
      document.querySelector('.loading').style.display = 'none';
    }, 2000); // 模拟2秒加载时间
  }
});
</script>
 
</body>
</html>

在这个示例中，当用户上划到页面底部时，会触发加载更多内容的功能。在实际项目中，可以根据需求自定义加载更多的内容和样式。

father:: 前端

关系图谱