vue开发浮动菜单碰到的问题的解决方案

最新推荐文章于 2026-04-18 14:50:16 发布

原创

最新推荐文章于 2026-04-18 14:50:16 发布 · 822 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在Vue项目中开发一个浮动菜单组件，该组件能根据用户滚动页面自动高亮显示相应的菜单项。通过将菜单配置为全局变量并接收动态计算的scrollTop值数组作为参数，实现了菜单与页面元素的联动。此外，还强调了动态生成元素和设置图片高度对计算准确性的重要性。

开发浮动菜单，实现功能：

1、点击菜单项，滚动到对应位置。 2、拖动滚动条，对应的菜单项高亮显示。

效果如下图所示：
浮动菜单效果图

考虑到多个页面都有此效果，所以做成公共组件breadnav.vue

<template>
    <div class="nav" :class="{'is_fixed': navFixed}">
        <div v-for="(item, index) in this.menus" :key="index" @click="toClick(item.url, index)" :class="navActive === index ? 'is_active' : ''">{
  
  {item.title}}</div>
    </div>
</template>
<script>
/*  add by wzy at 2020/04/29
 *  menus 浮动菜单项
 *  navArr 每个菜单项对应的scrolltop值
 */
export default {
    name: 'breadnav',
    props: {
        menus: {
            type: Array,
            default() {
                return []
            }
        },
        navArr: {
            type: Array,
            default() {
                return []
            }
        }
    },
	data() {
		retur

标签

#vue.js