Uniapp实现底部菜单公用的方法

在Uniapp开发中，实现底部菜单公用能够极大地提高开发效率，优化用户体验。下面就来详细探讨一下实现底部菜单公用的具体方法。

我们可以通过创建一个独立的组件来实现底部菜单的公用。在Uniapp项目的components文件夹下，新建一个底部菜单组件，比如命名为bottom-menu.vue。在这个组件中，我们可以使用Vue的模板语法来构建底部菜单的样式和结构。通过class绑定不同的样式类，来实现菜单在不同状态下的显示效果，比如选中和未选中状态。

<template>
  <view class="bottom-menu">
    <view class="menu-item" :class="{ active: currentIndex === 0 }" @click="switchTab(0)">
      <image :src="currentIndex === 0? activeIcon1 : inactiveIcon1"></image>
      <text>首页</text>
    </view>
    <view class="menu-item" :class="{ active: currentIndex === 1 }" @click="switchTab(1)">
      <image :src="currentIndex === 1? activeIcon2 : inactiveIcon2"></image>
      <text>分类</text>
    </view>
    <!-- 其他菜单项 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      activeIcon1: 'active_home_icon.png',
      inactiveIcon1: 'inactive_home_icon.png',
      // 其他图标路径
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      // 可以在这里添加页面跳转逻辑
    },
  },
};
</script>

<style scoped>
.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.active {
  color: #1aad19;
}
</style>

然后，在需要使用底部菜单的页面中，引入这个组件。在页面的template中添加组件标签，在script中引入组件并注册。

<template>
  <view>
    <!-- 页面主体内容 -->
    <bottom-menu></bottom-menu>
  </view>
</template>

<script>
import bottomMenu from '@/components/bottom-menu.vue';
export default {
  components: {
    bottomMenu,
  },
};
</script>

通过这种方式，在不同页面中复用底部菜单组件，只需要维护一个底部菜单组件的代码，当需要对底部菜单进行样式修改或者功能调整时，只需要在这个组件中进行修改，所有使用该组件的页面都会同步更新。这种方法不仅提高了代码的可维护性，也让项目的结构更加清晰，是Uniapp开发中实现底部菜单公用的有效方式。