首頁手記滾動吸頂資料入門教程：輕松掌握網頁頂部滾動技巧

滾動吸頂資料入門教程：輕松掌握網頁頂部滾動技巧

標簽：

Html/CSS 前端工具

概述

滚动吸顶是一种网页设计中的交互技巧，通过固定某些元素在页面顶部来提升用户体验。这种技术广泛应用于导航菜单、搜索栏和重要功能按钮等场景，使用户在滚动页面时能够快速访问重要信息。滚动吸顶的实现方法包括纯CSS和CSS与JavaScript结合的方式，同时还需要注意解决可能出现的内容重叠和滚动不流畅等问题。

滚动吸顶的定义与应用场景

滚动吸顶是一种网页设计中常用的交互技巧，它能够提升用户体验，使页面导航更加灵活和直观。当用户滚动页面时，某些元素会固定在页面顶部，这种效果称为滚动吸顶。

什么是滚动吸顶

滚动吸顶是一种网页布局技术，当用户向下滚动页面时，固定在顶部的元素会保持在页面顶部，不会随着页面内容的滚动而消失。这种效果通常用于导航菜单、搜索栏或重要功能按钮，以便用户在浏览页面时能够快速访问这些重要功能。

滚动吸顶的应用场景介绍

导航菜单：滚动吸顶技术常用于导航菜单，用户在浏览页面时可以随时通过顶部导航栏快速跳转到其他页面。如网站的首页导航、分类导航等。
- 示例：
```
<nav class="navbar fixed-top">
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#services">服务</a>
</nav>
```
重要功能区域：在一些交互频繁的页面中，可以将重要功能区域固定在页面顶部，如购物网站中的搜索栏、购物车等。这些功能区域即使在滚动页面时也能被用户随时访问。
- 示例：
```
<div class="search-bar fixed-top">
<input type="text" placeholder="搜索...">
<button>搜索</button>
</div>
```
侧边栏：有时侧边栏会包含一些重要功能或内容链接，通过滚动吸顶将侧边栏固定在页面顶部，可以方便用户随时访问这些内容。
- 示例：
```
<aside class="sidebar fixed-top">
<ul>
 <li><a href="#link1">链接1</a></li>
 <li><a href="#link2">链接2</a></li>
</ul>
</aside>
```
重要通知：对于需要突出显示的通知或公告，可以将它们固定在页面顶部，确保用户在浏览页面时能够看到这些信息。
- 示例：
```
<div class="announcement fixed-top">
<p>注意：网站将在明天进行维护，请提前做好准备。</p>
</div>
```
滚动加载内容：在长篇文章或大量内容的页面中，可以将滚动加载按钮固定在页面顶部，让用户随时可以回到页面顶部继续阅读。
- 示例：
```
<div class="scroll-to-top fixed-top">
<button onclick="scrollToTop()">回到顶部</button>
</div>
```

滚动吸顶技术的应用可以显著提升用户体验，让用户在浏览页面时更便捷、高效地访问重要信息和功能。

基础技术与代码实现

滚动吸顶效果的实现涉及到CSS和JavaScript两个方面的技术。通过这两种技术的结合，可以实现元素在页面滚动时固定在顶部的效果。

常见的实现方法

滚动吸顶的实现方法主要有两种：纯CSS实现和CSS与JavaScript结合实现。

纯CSS实现

纯CSS实现滚动吸顶使用position: fixed属性将元素固定在页面顶部。这种方法简单且易于实现。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>滚动吸顶示例</title>
<style>
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
  }
  .scroll-content {
    margin-top: 50px; /* 与固定头部的高度相匹配 */
  }
</style>
</head>
<body>
  <div class="fixed-header">
    <h1>固定头部</h1>
  </div>
  <div class="scroll-content">
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
</body>
</html>

CSS与JavaScript结合实现

在某些复杂场景下，仅使用position: fixed可能无法满足需求，此时可以结合JavaScript来实现更灵活的滚动吸顶效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>滚动吸顶示例</title>
<style>
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
    transition: top 0.3s ease-in-out;
  }
  .scroll-content {
    margin-top: 50px; /* 与固定头部的高度相匹配 */
  }
</style>
<script>
  let header = document.querySelector('.fixed-header');
  let originalTop = header.offsetTop;

  window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    header.style.top = scrollTop > originalTop ? '0' : `${originalTop}px`;
  });
</script>
</head>
<body>
  <div class="fixed-header">
    <h1>固定头部</h1>
  </div>
  <div class="scroll-content">
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
</body>
</html>

上述代码中，CSS设置了position: fixed，并将transition属性用于平滑效果。JavaScript部分监听了窗口的滚动事件，根据滚动位置动态调整固定头部的位置。

通过这两种实现方法，你可以根据实际需求选择适合的方式实现滚动吸顶效果。

常见问题与解决方法

滚动吸顶技术在实际应用中可能会遇到一些常见问题，这些问题会影响用户体验和页面功能的正常运行。在本节中，我们将介绍一些常见的问题及其解决方法。

滚动吸顶可能出现的问题汇总

内容重叠问题：固定元素固定在顶部后，可能会与页面中的其他元素产生重叠，导致页面布局混乱。
滚动条滚动不流畅：当固定元素固定在顶部时，如果滚动条滚动不流畅，用户会感到不适。
固定元素在移动端缩放时出现错位：在移动端浏览时，固定元素可能会因为屏幕缩放而出现错位。
固定元素在不同浏览器中的显示效果不一致：由于不同浏览器对CSS的支持不同，固定元素在不同浏览器中的显示效果可能会存在差异。
固定元素在某些情况下消失：在某些情况下，固定元素可能会因为滚动位置的变化而消失，导致用户体验不佳。

解决常见问题的方法

内容重叠问题

为了解决内容重叠问题，可以在固定元素的父元素中设置适当的内边距，以确保固定元素不会与页面中的其他元素重叠。此外，可以使用CSS的z-index属性来设置元素的层叠顺序。

示例代码

<div class="container">
  <div class="fixed-header">
    <!-- 固定头部的内容 -->
  </div>
  <div class="scroll-content">
    <!-- 页面内容 -->
  </div>
</div>

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 1000;
}

.container {
  padding-top: 50px; /* 与固定头部的高度相匹配 */
  position: relative;
  z-index: 1;
}

.scroll-content {
  margin-top: 0;
  padding: 20px;
}

滚动条滚动不流畅

滚动条滚动不流畅的问题可以通过设置overflow属性来解决。确保页面元素具有合适的滚动行为，以避免滚动卡顿。

示例代码

.scroll-content {
  height: 100vh;
  overflow-y: auto;
}

固定元素在移动端缩放时出现错位

在移动端浏览时，固定元素可能会因为屏幕缩放而错位。解决方法包括使用响应式设计，确保固定元素在不同屏幕尺寸上的表现一致。

示例代码

@media (max-width: 768px) {
  .fixed-header {
    padding: 5px;
  }
}

固定元素在不同浏览器中的显示效果不一致

解决不同浏览器显示效果不一致的问题，可以使用CSS前缀，确保代码在不同浏览器中的兼容性。

示例代码

.fixed-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 1000;
}

固定元素在某些情况下消失

固定元素在某些情况下消失的问题可以通过JavaScript来解决。在滚动事件中动态调整固定元素的位置，确保它在所有情况下都能正常显示。

示例代码

window.addEventListener('scroll', function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  let header = document.querySelector('.fixed-header');
  header.style.top = scrollTop > 0 ? '0' : 'auto';
});

通过以上方法，可以有效解决滚动吸顶技术在实际应用中可能遇到的问题，提高页面的功能性和用户体验。

滚动吸顶的优化技巧

滚动吸顶技术在网页设计中非常实用，但在实际应用中，我们可以通过一些小技巧进一步提升用户体验。此外，在开发过程中，测试与调试是确保滚动吸顶功能正常运行的重要步骤。

提升用户体验的小技巧

平滑过渡：使用CSS的过渡效果，使固定元素在滚动时平滑地移动，提升页面的视觉效果。
响应式布局：确保滚动吸顶功能在不同屏幕尺寸和设备上的表现一致，提供更好的用户体验。
动画效果：在固定元素从滚动位置到固定位置时添加过渡动画，使交互更加自然流畅。
交互反馈：在用户滚动页面时，提供适当的视觉反馈，如颜色变化或背景透明度改变，增强用户感知。
触摸设备支持：确保在触摸设备上，滚动吸顶功能同样流畅，尤其是在移动设备上，优化滚动性能。
隐藏和显示控制：在页面内容较少或不需要滚动吸顶功能时，可以隐藏固定元素，避免冗余。
用户引导：为用户提供明确的引导，使他们了解并能充分利用滚动吸顶功能，如在页面顶部添加提示信息。
固定元素内容管理：确保固定元素中的内容简洁明了，避免加载过多信息导致页面混乱。

示例代码

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

window.addEventListener('scroll', function() {
  let header = document.querySelector('.fixed-header');
  if (window.scrollY > 0) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

.fixed-header.scrolled {
  background-color: #666;
  color: #fff;
}

测试与调试方法

在开发过程中，测试和调试是确保滚动吸顶功能正常运行的重要步骤。以下是一些建议的测试和调试方法：

单元测试

编写单元测试，确保滚动吸顶功能在各种场景下的表现符合预期。

示例代码

describe('Fixed Header Test', function() {
  it('should add class when scrolled', function() {
    let header = document.createElement('div');
    header.classList.add('fixed-header');
    document.body.appendChild(header);

    window.scrollY = 100;
    let addClassSpy = spyOn(header, 'classList.add');
    handleScroll();

    expect(addClassSpy).toHaveBeenCalledWith('scrolled');
  });
});

测试不同的屏幕尺寸和设备

使用浏览器的开发者工具模拟不同的屏幕尺寸和设备，确保滚动吸顶功能在各种设备上表现一致。

示例代码

<meta name="viewport" content="width=device-width, initial-scale=1">

模拟滚动事件

使用JavaScript模拟滚动事件，确保滚动吸顶功能在各种滚动操作下的表现符合预期。

示例代码

function handleScroll() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  let header = document.querySelector('.fixed-header');
  header.style.top = scrollTop > 0 ? '0' : 'auto';
}

window.addEventListener('scroll', handleScroll);

// 模拟滚动事件
window.scrollY = 100;
handleScroll();

观察滚动性能

使用浏览器的性能工具观察滚动吸顶功能对页面性能的影响，确保滚动吸顶功能不会导致页面卡顿或性能下降。

示例代码

// 使用Chrome DevTools的Performance面板
// 打开Performance面板，开始录制，滚动页面，然后停止录制

通过以上测试和调试方法，可以确保滚动吸顶功能在各种场景下的表现符合预期，提升用户体验。

案例分析与实战演练

在实际项目中，滚动吸顶技术可以应用于各种场景，提升页面的交互性和用户体验。以下是一些实际项目中的滚动吸顶应用案例，以及如何从头开始实现滚动吸顶功能。

实际项目中的滚动吸顶应用案例

案例1：电商网站导航栏

在电商网站中，导航栏通常会用滚动吸顶技术固定在页面顶部，使用户在浏览商品列表时可以随时通过导航栏快速跳转到其他页面或筛选商品。

示例代码

<nav class="navbar fixed-top">
  <a href="#home">首页</a>
  <a href="#category">分类</a>
  <a href="#brand">品牌</a>
  <a href="#search">搜索</a>
</nav>

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 1000;
}

.navbar a {
  color: #fff;
}

案例2：新闻网站头部导航

在新闻网站中，头部导航会固定在页面顶部，用户在浏览文章列表时可以快速切换到不同的新闻类别或搜索新闻。

示例代码

<header class="header fixed-top">
  <div class="logo">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="logo.png" alt="Logo">
  </div>
  <nav>
    <ul class="nav-list">
      <li><a href="#latest">最新</a></li>
      <li><a href="#technology">科技</a></li>
      <li><a href="#entertainment">娱乐</a></li>
      <li><a href="#sports">体育</a></li>
    </ul>
  </nav>
</header>

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 1000;
}

.nav-list li a {
  color: #fff;
}

案例3：社交媒体应用搜索栏

在社交媒体应用中，搜索栏固定在页面顶部，用户可以随时输入关键词搜索内容，而不需要回到页面顶部。

示例代码

<div class="search-bar fixed-top">
  <input type="text" placeholder="搜索...">
  <button>搜索</button>
</div>

.search-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  padding: 10px;
  z-index: 1000;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-bar button {
  margin-left: 10px;
  padding: 10px 20px;
  border: none;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

案例4：侧边栏固定示例

在一些复杂页面中，侧边栏可以用来展示重要信息或链接，固定侧边栏在页面顶部可以提高用户体验。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>侧边栏固定示例</title>
<style>
  .sidebar {
    position: fixed;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: #f4f4f4;
    padding: 10px;
    z-index: 1000;
  }
  .content {
    margin-left: 220px;
  }
</style>
</head>
<body>
  <aside class="sidebar">
    <ul>
      <li><a href="#link1">链接1</a></li>
      <li><a href="#link2">链接2</a></li>
    </ul>
  </aside>
  <div class="content">
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
</body>
</html>

实战演练与练习建议

为了更好地掌握滚动吸顶技术，以下是一些建议的实战演练和练习方法：

1. 重复实现滚动吸顶功能

反复实现滚动吸顶功能，从基础的固定元素到更复杂的交互效果，逐步提高自己的技能水平。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>滚动吸顶练习</title>
<style>
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
    transition: top 0.3s ease-in-out;
  }
  .scroll-content {
    margin-top: 50px;
    height: 2000px;
    background-color: #eee;
  }
</style>
</head>
<body>
  <div class="fixed-header">
    <h1>固定头部</h1>
  </div>
  <div class="scroll-content">
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
  <script>
    window.addEventListener('scroll', function() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      let header = document.querySelector('.fixed-header');
      header.style.top = scrollTop > 0 ? '0' : 'auto';
    });
  </script>
</body>
</html>

2. 联合其他技术实现复杂效果

结合其他前端技术，如JavaScript动画库或CSS变量，实现更复杂的滚动吸顶效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>滚动吸顶练习</title>
<style>
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
  }
  .scroll-content {
    margin-top: 50px;
    height: 2000px;
    background-color: #eee;
  }
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script>
  window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let header = document.querySelector('.fixed-header');
    header.style.top = scrollTop > 0 ? '0' : 'auto';
  });
</script>
</head>
<body>
  <div class="fixed-header">
    <h1>固定头部</h1>
  </div>
  <div class="scroll-content">
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
</body>
</html>

3. 应用到实际项目中

在实际项目中应用滚动吸顶技术，从简单的导航栏到复杂的布局设计，逐步提高自己的项目经验。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>滚动吸顶练习</title>
<style>
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    z-index: 1000;
  }
  .scroll-content {
    margin-top: 50px;
    height: 2000px;
    background-color: #eee;
  }
</style>
<script>
  window.addEventListener('scroll', function() {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let header = document.querySelector('.fixed-header');
    header.style.top = scrollTop > 0 ? '0' : 'auto';
  });
</script>
</head>
<body>
  <nav class="navbar fixed-top">
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
  </nav>
  <div class="scroll-content">
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <p>这是页面内容，有很多内容。</p>
    <!-- 更多内容 -->
  </div>
</body>
</html>

通过以上实战演练和练习建议，可以加深对滚动吸顶技术的理解，提高实际应用能力。

总结与学习资源推荐

在这篇文章中，我们详细介绍了滚动吸顶技术的概念、应用场景、实现方法、常见问题和解决方法、优化技巧以及案例分析。滚动吸顶技术在网页设计中非常实用，能够显著提升用户体验。

本教程的总结

滚动吸顶技术在网页设计中起到重要的交互作用，通过固定元素在页面顶部，使用户在浏览页面时能够快速访问重要信息和功能。实现滚动吸顶技术的方法有纯CSS和CSS与JavaScript结合两种方式。在实际应用中，可能会遇到内容重叠、滚动不流畅等问题，可以通过设置合适的内边距和z-index属性，以及使用CSS的过渡效果等方法来解决。

推荐的学习资源和进阶资料

如果你想进一步提升滚动吸顶技术的技能，以下是一些推荐的学习资源和进阶资料：

慕课网：这是一个优质的在线学习平台，提供了大量关于前端技术的教程和实战项目，适合不同水平的学习者。
- 链接：慕课网
MDN Web Docs：MDN Web Docs是Mozilla开发者网络提供的一个详尽的Web开发资源库，包含了CSS、JavaScript、HTML等技术的详细文档和示例。
- 链接：MDN Web Docs
CSS Tricks：这是一个专注于CSS技术的博客，提供了大量关于CSS布局、动画以及高级技巧的文章，是提高CSS技能的好资源。
- 链接：CSS Tricks
Stack Overflow：Stack Overflow是一个专业的问答网站，提供了大量关于编程问题的讨论和解决方案，是解决编程问题的好去处。
- 链接：Stack Overflow

通过这些资源，你可以进一步学习滚动吸顶技术以及其他相关的前端技术，提高自己的技能水平。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

互換的青春

手記
篇

粉絲

19

獲贊與收藏

61

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

Pandas 入門教程

25個小節 19564 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

滾動吸頂資料入門教程：輕松掌握網頁頂部滾動技巧

纯CSS实现

示例代码

CSS与JavaScript结合实现

示例代码

内容重叠问题

示例代码

滚动条滚动不流畅

示例代码

固定元素在移动端缩放时出现错位

示例代码

固定元素在不同浏览器中的显示效果不一致

示例代码

固定元素在某些情况下消失

示例代码

示例代码

单元测试

示例代码

测试不同的屏幕尺寸和设备

示例代码

模拟滚动事件

示例代码

观察滚动性能

示例代码

案例1：电商网站导航栏

示例代码

案例2：新闻网站头部导航

示例代码

案例3：社交媒体应用搜索栏

示例代码

案例4：侧边栏固定示例

示例代码

1. 重复实现滚动吸顶功能

示例代码

2. 联合其他技术实现复杂效果

示例代码

3. 应用到实际项目中

示例代码

閱讀免費教程