为了改善任何网页内容丰富的网站的用户体验，前端开发人员通常通过按钮实现滚动到顶部的功能，以使用户更愉快和方便。
虽然用户可以使用键盘上的命令 + 向上箭头，但同样重要的是要记住，可能 超过一半的用户 可能正在使用移动设备，并且在滚动浏览您的网站时不会使用连接到手机的键盘。 较小的屏幕通常也需要更多的滚动，使得从底部到顶部的导航很费力。
在本指南中，我们将使用 Vue 3 逐步实现滚动到顶部按钮。 除了可重用组件之外，我们还将构建一个新闻应用程序，该应用程序提供来自各种来源的突发新闻 新闻 API.
源代码： 像往常一样，您可以修改托管在 GitHub上.
项目设置
Vue.JS 框架的入门很简单，只需在 HTML 文件中包含一个 JavaScript 文件。 但对于现实世界的大规模应用， vue-cli 是最好的开始方式！ 我们将使用 vue-cli 在我们今天的教程中。
让我们创建项目并命名它 vue-scroll-to-top，使用以下命令：
$ vue create vue-scroll-to-top
这将创建一个模板来开始构建我们的项目。 您可以通过进入项目来启动应用程序：
$ cd vue-scroll-to-top
和 serve 使用 Yarn 或 NPM：
$ yarn serve
或：
$ npm run serve
On localhost, 在港口 8080 – 您的申请将被送达：
构建组件
随着模板的启动——我们可以开始构建可重用的滚动到顶部组件，它可以推广到您想要构建的任何应用程序。 在定义组件之前，让我们准备和清理 App.vue 我们使用 Vue CLI 创建的 starter。
清理 Vue 项目
下 src/App.vue，我们将即将成为的组件注册为 AppButton:
<template>
<section class="app-container">
<AppButton />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
export default {
name: "App",
components: {
AppButton
},
setup() {
return {};
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
构建按钮 UI
使用将显示按钮（和新闻）的页面——我们可以开始构建组件。 让我们从按钮开始吧！
在 components 文件夹，创建一个 AppButton.vue 文件。 在按钮中，我们将包含一个图标，表示 向上箭头 直观地传达功能。 对于图标本身，我们将使用一个名为的图标库 字体真棒 它有超过 19.000 种风格和品牌的 6 多个图标，尽管这可以用一个简单的插入符号 (^)、自定义图标或其他库中的图标（如果您不想引入其他依赖项）。
使用您喜欢的依赖管理器，安装包含所有实用程序的核心包以使图标工作：
$ yarn add @fortawesome/fontawesome-svg-core
# Or
$ npm i --save @fortawesome/fontawesome-svg-core
接下来，我们将安装 免费的实心 SVG 图标 （多个可用的“集合”或样式之一），使用以下命令：
查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。 停止谷歌搜索 Git 命令，实际上 学习 它！
$ yarn add @fortawesome/free-solid-svg-icons
# Or
$ npm i --save @fortawesome/free-solid-svg-icons
最后，我们将安装 字体真棒 Vue 组件 对于 Vue 3，使用以下命令：
$ yarn add @fortawesome/[email protected]
# Or
$ npm i --save @fortawesome/[email protected]
在我们可以在按钮中渲染图标之前，我们需要将已安装的 Font Awesome 依赖项导入到我们的项目中，包括我们要使用的特定图标名称。 让我们更新 main.js 文件：
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowUp)
createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
我们现在可以将向上箭头图标称为 faArrowUp在 AppButton.vue 在 UI 中渲染它！ 我们还可以从组件文件中设置按钮样式：
<template>
<button class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
right: 40px;
bottom: 40px;
}
</style>
在 DOM 上，当您打开应用程序时，我们的滚动到顶部按钮应如下所示 localhost:8080:
构建新闻提要 UI
为了创建一个用户可能想要使用按钮而不是手动滚动的环境——让我们从免费的新闻 API 中获取大量新闻内容。 为了发出 fetch 请求，我们将利用 axios 包。
如果您还没有安装它，您可以通过 Yarn 或 NPM 安装：
$ yarn add axios
# Or
$ npm install axios
要使用新闻 API，您需要注册一个 帐户 – 获得对开发环境免费的 API 密钥。 对于这个演示，我们将通过获取所有关于比特币的文章来保持简单。 在里面 components 文件夹，让我们创建一个名为 NewsList.vue。在 NewsList.vue，我们将构建一个比特币新闻文章列表，作为 API 的响应。
NewsList.vue 现在应该包括以下代码：
<template>
<section>
<ul class="news-list">
<li class="news-card" v-for="newsItem in newsList" :key="newsItem.id">
<p><span class="heading">Title</span>: {{ newsItem.title }}</p>
<p><span class="heading">Author</span>: {{ newsItem.author }}</p>
<p>
<span class="heading">Description</span>: {{ newsItem.description }}
</p>
<p><span class="heading">Source</span>: {{ newsItem.source.name }}</p>
</li>
</ul>
</section>
</template>
<script>
import axios from "axios";
import { onMounted, ref } from "vue";
export default {
name: "NewsList",
setup() {
const newsList = ref([]);
const fetchNews = () => {
axios
.get(
"https://newsapi.org/v2/everything?q=bitcoin&apiKey=94585b39692e4ea6b372bea15abf7dcc"
)
.then((response) => (newsList.value = response.data.articles));
};
onMounted(() => {
fetchNews();
});
return { newsList };
},
};
</script>
<style scoped>
ul.news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}
ul li.news-card {
padding: 10px;
display: flex;
border-radius: 8px;
flex-direction: column;
row-gap: 5px;
box-shadow: 0px 4px 12px -1px rgba(120,116,120,0.79);
}
li p span.heading {
font-weight: 600;
font-size: 18;
}
</style>
然后，我们确保更新 App.vue，这样就可以显示新闻文章列表：
<template>
<section class="app-container">
<AppButton />
<NewsList />
</section>
</template>
<script>
import AppButton from "./components/AppButton.vue";
import NewsList from "./components/NewsList.vue";
export default {
name: "App",
components: {
AppButton,
NewsList,
},
setup() {
return{}
}
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: inherit;
}
html {
font-family: "Nunito", sans-serif;
}
body {
font-size: 15px;
color: #000000;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
.app-container {
max-width: 82rem;
margin: auto;
padding: 3rem 1rem;
}
</style>
通常——你想要对结果进行分页，而不是让它们堆积起来。 但是，我们专门创建了一个滚动到顶部很有用的案例。
使用滚动侦听器显示/隐藏滚动到顶部按钮
作为用户参与体验的一部分，让我们确保只有当用户开始向下滚动页面时才会显示滚动到顶部按钮。
为此，我们必须在用户向下滚动页面时监听滚动事件。
首先，让我们通过设置一个 ref 来定位按钮元素。 然后，我们利用 beforeUnmount() 在滚动监听器的帮助下，生命周期钩子在 DOM 中添加和删除按钮 - 在向下滚动页面或页面最顶部时。 我们还可以检查用户是否在页面顶部，如果 window.scrollY 大于 0。有了这个，我们可以在需要的地方切换按钮的可见性。
让我们更新 AppButton.vue 组件根据用户滚动的距离显示或隐藏按钮：
<template>
<button ref="appButton" class="app-button">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
</template>
<script>
import { onMounted, ref, onBeforeMount } from "vue";
export default {
name: "AppButton",
setup() {
const appButton = ref();
const userScroll = () => {
if (window.scrollY > 0) {
appButton.value.classList.add("showButton");
console.log('scrolled');
} else {
appButton.value.classList.remove("showButton");
console.log('top');
}
};
onMounted(() => {
window.addEventListener("scroll", userScroll);
});
onBeforeMount(() => {
window.removeEventListener("scroll", userScroll);
});
return { appButton };
},
};
</script>
<style scoped>
.app-button {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 4px;
box-shadow: 2px 2px #e9e9e9;
cursor: pointer;
position: fixed;
bottom: 40px;
display: none;
right: 40px;
}
.showButton {
display: block;
}
</style>
实现滚动事件
在这一点上，我们剩下的就是让按钮在用户单击它时真正滚动到页面顶部。 为了实现这一点，让我们创建一个 scrollToTop() 方法中 AppButton.vue. 这是我们将在何时调用的方法 window.scrollY = 0. 现在，当 scrollToTop() 方法被调用，我们的页面平滑地滚动到最顶部，并且滚动顶部按钮也消失了：
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
当这段代码被添加到 AppButton.vue，您会发现我们已经在我们的 Vue 应用程序中成功实现了滚动到顶部的功能，我们可以将其插入到任何需要相同功能的项目中。
结论
恭喜你一直坚持到最后！ 🔥
在本教程中，我们了解了如何将滚动到顶部功能构建到 Vue 应用程序中。 这是一个可重用的通用组件，也可以很容易地在其他项目中引入。
