### 功能概述
在
Vue 3 应用中
实现一个“返回
顶部”按钮功能，通常包括以下几个核心部分：
1
. **
显示/
隐藏按钮逻辑**：当用户
滚动页面到一定距离时，按钮出现；当
页面滚动到
顶部附近时，按钮
隐藏。
2
. **点击按钮后平滑
滚动回
顶部**：通过
JavaScript 的 `scrollTo` 方法
实现平滑
滚动效果。
3. **兼容移动端和 PC 端**：确保组件在不同设备上表现一致。
---
###
实现方式
#### 1
. 创建 `GoTopBtn` 组件
首先，创建一个可复用的 `GoTopBtn
.vue` 组件，用于封装“返回
顶部”按钮的逻辑和样式。
```
vue
<template>
<transition name="fade">
<div v-show="backTopFlag" class="go-top" @click="backTop">
<slot>
<button>↑</button>
</slot>
</div>
</transition>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from &#
39;
vue&#
39;
const backTopFlag = ref(false)
const handleScroll = () => {
const scrollTop = document
.documentElement
.scrollTop
backTopFlag
.value = scrollTop > 20 //
页面滚动超过 20px
显示按钮
}
const backTop = () => {
window
.scrollTo({
top: 0,
behavior: &#
39;smooth&#
39;
})
}
onMounted(() => {
window
.addEventListener(&#
39;scroll&#
39;, handleScroll)
})
onUnmounted(() => {
window
.removeEventListener(&#
39;scroll&#
39;, handleScroll)
})
</script>
<style scoped>
.go-top {
position: fixed;
bottom: 40px;
right: 40px;
cursor: pointer;
z-index: 999;
transition: opacity 0
.3s ease;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0
.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
```
#### 2
. 在
页面中使用 `GoTopBtn` 组件
接下来，在
页面中引入并使用该组件。
```
vue
<template>
<div>
<!--
页面内容 -->
<div style="height: 2000px;">
页面内容
...</div>
<!-- 返回
顶部按钮 -->
<GoTopBtn />
</div>
</template>
<script setup>
import GoTopBtn from &#
39;
./components/GoTopBtn
.vue&#
39;
</script>
```
####
3. 自定义按钮样式
可以通过 `slot` 自定义按钮的样式，例如使用图标或文字：
```
vue
<GoTopBtn>
<button style="background: #007BFF; color: white; border: none; border-radius: 50%; width: 50px; height: 50px;">↑</button>
</GoTopBtn>
```
---
### 优化建议
- **性能优化**：可以使用 `throttle` 或 `debounce` 来减少 `scroll` 事件的触发频率，提升性能。
- **响应式设计**：在不同屏幕尺寸下调整按钮的位置和大小，确保在移动端和 PC 端都易于点击。
- **可配置性**：可以将 `20px` 的
显示阈值作为 `props` 传入组件，使其更灵活。
```
vue
<script setup>
import { defineProps } from &#
39;
vue&#
39;
const props = defineProps({
threshold: {
type: Number,
default: 20
}
})
</script>
```
在 `handleScroll` 中使用 `props
.threshold` 替代
固定值 `20`。
---
### 与其他
框架的兼容性
- **Nuxt
3**：该组件可在 Nuxt
3 项目中直接使用，只需将组件放置在 `components` 目录下。
- **移动端优化**：确保按钮的点击区域足够大，避免在触摸屏上误触。
---
扫一扫
1870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
