Vue.js组件开发-实现底部浮动导航页面滚动预览

使用 Vue 实现底部浮动导航，并且在页面滚动时进行预览

步骤概述

创建 Vue 项目：使用 Vue CLI 创建一个新的 Vue 项目。
设计页面结构：创建包含内容区域和底部浮动导航栏的页面结构。
实现滚动监听：监听页面滚动事件，根据滚动位置更新导航栏的激活状态。
实现导航跳转：点击导航栏的项时，页面滚动到相应的内容区域。

详细代码

1. 创建 Vue 项目

安装 Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create baike-navigation
cd baike-navigation

2. 编写组件代码

在 src/components 目录下创建一个名为 BaikeNavigation.vue 的组件，代码如下：

<template><div><!-- 内容区域 --><div class="content"><!-- 循环渲染每个章节 --><div v-for="section in sections" :key="section.id" :id="section.id"><h2>{{ section.title }}</h2><p>{{ section.content }}</p></div></div><!-- 底部浮动导航栏 --><div class="floating-nav"><!-- 循环渲染导航项 --><divv-for="section in sections":key="section.id":class="{ active: activeSection === section.id }"@click="scrollToSection(section.id)">{{ section.title }}</div></div></div>
</template><script>
export default {data() {return {// 定义章节数据sections: [{ id: 'section1', title: '章节 1', content: '这是章节 1 的内容。' },{ id: 'section2', title: '章节 2', content: '这是章节 2 的内容。' },{ id: 'section3', title: '章节 3', content: '这是章节 3 的内容。' },{ id: 'section4', title: '章节 4', content: '这是章节 4 的内容。' }],// 当前激活的章节 IDactiveSection: null};},mounted() {// 页面加载完成后，监听滚动事件window.addEventListener('scroll', this.handleScroll);// 初始化激活章节this.handleScroll();},beforeDestroy() {// 组件销毁前，移除滚动事件监听window.removeEventListener('scroll', this.handleScroll);},methods: {// 处理滚动事件的方法handleScroll() {const scrollTop = window.pageYOffset || document.documentElement.scrollTop;// 遍历每个章节for (let i = this.sections.length - 1; i >= 0; i--) {const section = this.sections[i];const element = document.getElementById(section.id);if (element && scrollTop >= element.offsetTop - 50) {// 如果滚动位置超过章节顶部，更新激活章节this.activeSection = section.id;break;}}},// 滚动到指定章节的方法scrollToSection(id) {const element = document.getElementById(id);if (element) {// 使用平滑滚动到指定章节element.scrollIntoView({ behavior: 'smooth' });}}}
};
</script><style scoped>
.content {padding: 20px;
}.floating-nav {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #f5f5f5;border-top: 1px solid #ddd;display: flex;justify-content: center;align-items: center;padding: 10px 0;
}.floating-nav div {margin: 0 10px;cursor: pointer;
}.floating-nav div.active {color: #ff0000;
}
</style>

3. 在 `App.vue` 中使用组件

<template><div id="app"><BaikeNavigation /></div>
</template><script>
import BaikeNavigation from './components/BaikeNavigation.vue';export default {components: {BaikeNavigation}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

代码注释说明

template 部分：
- content 类的 div 用于显示内容区域，使用 v-for 指令循环渲染每个章节。
- floating-nav 类的 div 是底部浮动导航栏，同样使用 v-for 指令循环渲染导航项。
- :class="{ active: activeSection === section.id }" 根据当前激活的章节添加 active 类。
- @click="scrollToSection(section.id)" 点击导航项时调用 scrollToSection 方法。
script 部分：
- data 中定义了 sections 数组存储章节数据，activeSection 存储当前激活的章节 ID。
- mounted 钩子中添加滚动事件监听，并初始化激活章节。
- beforeDestroy 钩子中移除滚动事件监听，避免内存泄漏。
- handleScroll 方法监听滚动事件，根据滚动位置更新激活章节。
- scrollToSection 方法用于滚动到指定章节。
style 部分：
- .content 定义内容区域的样式。
- .floating-nav 定义底部浮动导航栏的样式。
- .floating-nav div.active 定义激活导航项的样式。