当前位置：首页 > VUE

vue实现底部浮动导航

2026-01-22 16:08:01VUE

Vue 实现底部浮动导航的方法

使用固定定位和 Flex 布局

在 Vue 组件中，可以通过 CSS 固定定位实现底部导航栏。创建一个名为 BottomNav.vue 的组件，代码如下：

<template>
  <div class="bottom-nav">
    <router-link to="/home">首页</router-link>
    <router-link to="/discover">发现</router-link>
    <router-link to="/cart">购物车</router-link>
    <router-link to="/mine">我的</router-link>
  </div>
</template>

<script>
export default {
  name: 'BottomNav'
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.bottom-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.bottom-nav a.router-link-active {
  color: #42b983;
}
</style>

使用 Vuetify 的 v-bottom-navigation 组件

如果项目中使用 Vuetify UI 框架，可以直接使用其提供的底部导航组件：

<template>
  <v-bottom-navigation
    fixed
    color="primary"
  >
    <v-btn value="home">
      <span>首页</span>
      <v-icon>mdi-home</v-icon>
    </v-btn>

    <v-btn value="discover">
      <span>发现</span>
      <v-icon>mdi-compass</v-icon>
    </v-btn>

    <v-btn value="cart">
      <span>购物车</span>
      <v-icon>mdi-cart</v-icon>
    </v-btn>

    <v-btn value="mine">
      <span>我的</span>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>

<script>
export default {
  name: 'BottomNav'
}
</script>

响应式显示与隐藏

可以通过监听滚动事件实现滚动时隐藏导航栏，停止滚动时显示：

<template>
  <div 
    class="bottom-nav"
    :class="{ 'hide-nav': isScrolling }"
  >
    <!-- 导航内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isScrolling: false,
      scrollTimer: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.isScrolling = true
      clearTimeout(this.scrollTimer)
      this.scrollTimer = setTimeout(() => {
        this.isScrolling = false
      }, 300)
    }
  }
}
</script>

<style>
.bottom-nav {
  transition: transform 0.3s ease;
}

.hide-nav {
  transform: translateY(100%);
}
</style>

适配 iPhone X 等全面屏设备

为底部导航添加安全区域 padding，避免被底部指示条遮挡：

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版本 */
}

添加动画效果

可以为导航栏添加显示/隐藏的动画效果：

vue实现底部浮动导航

.bottom-nav {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bottom-nav.hide-nav {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

以上方法可以根据具体项目需求选择或组合使用，实现功能完善且用户体验良好的底部浮动导航。

标签: vue