UniApp实现自定义底部菜单与TabBar的实现方法

UniApp是一个开源跨平台应用框架，可基于Vue.js开发各类应用。在开发过程中，底部菜单和TabBar是常见的设计需求，本文将介绍UniApp实现自定义底部菜单与TabBar的实现方法。

一、自定义底部菜单

底部菜单是UniApp中常见的功能组件，一般包括文字和图标，用于给用户提供导航和快速操作功能。UniApp中自定义底部菜单的实现主要分为两种方式：使用TabBar组件或使用自定义组件。

1.TabBar组件

TabBar顾名思义，是一种底部Tab导航的控件，可以通过设置选中项、图标和文字等属性，实现底部菜单的功能。

在Vue组件中声明TabBar组件：

<template>
  <view>
    <tabbar @click="onTabBarClick">
      <tabbar-item icon="home" text="首页" badge="5"></tabbar-item>
      <tabbar-item icon="search" text="搜索"></tabbar-item>
      <tabbar-item icon="star" text="收藏"></tabbar-item>
      <tabbar-item icon="setting" text="设置"></tabbar-item>
    </tabbar>
  </view>
</template>
<script>
  export default {
    methods: {
      onTabBarClick(e) {
        console.log(e.index)
      }
    }
  }
</script>

在TabBar组件中，我们可以通过设置tabbar-item标签的属性，来设置图标、文字和角标等信息。在点击底部菜单时，会触发tabbar的点击事件，并返回当前选中项的索引。

2.自定义组件

自定义组件可以在保留TabBar组件样式和特性的同时，更加灵活和个性化。在Vue组件中定义自定义组件时，我们可以在底部放置多个按钮，并通过设置active状态来切换按钮的样式和内容。

<template>
  <view class="custom-tabbar">
    <view 
      class="custom-tabbar-item" 
      :class="{active: activeIndex === 0}" 
      @click="onTabClick(0)">
      <icon 
        class="custom-tabbar-icon" 
        :class="{active: activeIndex === 0}" 
        type="home"></icon>
      <text 
        class="custom-tabbar-text" 
        :class="{active: activeIndex === 0}">
        首页
      </text>
    </view>
    <view 
      class="custom-tabbar-item" 
      :class="{active: activeIndex === 1}" 
      @click="onTabClick(1)">
      <icon 
        class="custom-tabbar-icon" 
        :class="{active: activeIndex === 1}"
        type="search"></icon>
      <text 
        class="custom-tabbar-text" 
        :class="{active: activeIndex === 1}">
        搜索
      </text>
    </view>
    <view 
      class="custom-tabbar-item" 
      :class="{active: activeIndex === 2}" 
      @click="onTabClick(2)">
      <icon 
        class="custom-tabbar-icon" 
        :class="{active: activeIndex === 2}"
        type="star"></icon>
      <text 
        class="custom-tabbar-text" 
        :class="{active: activeIndex === 2}">
        收藏
      </text>
    </view>
    <view 
      class="custom-tabbar-item" 
      :class="{active: activeIndex === 3}"
      @click="onTabClick(3)">
      <icon 
        class="custom-tabbar-icon" 
        :class="{active: activeIndex === 3}"
        type="setting"></icon>
      <text 
        class="custom-tabbar-text" 
        :class="{active: activeIndex === 3}">
        设置
      </text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: 0
      }
    },
    methods: {
      onTabClick(index) {
        this.activeIndex = index
      }
    }
  }
</script>
<style scoped>
  .custom-tabbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 80rpx;
    display: flex;
    background-color: #fff;
  }
  .custom-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .custom-tabbar-icon {
    font-size: 40rpx;
  }
  .custom-tabbar-text {
    margin-top: 10rpx;
    font-size: 26rpx;
  }
  .active .custom-tabbar-icon {
    color: #007aff;
  }
  .active .custom-tabbar-text {
    color: #007aff;
  }
</style>

在自定义组件中，我们通过设置view标签的样式和属性，模拟出TabBar组件的样式。通过设置.active的类名，来切换按钮的样式和内容，达到底部菜单的切换效果。

二、TabBar菜单

相比于自定义菜单，TabBar菜单不仅包含底部菜单，还可以通过点击菜单项，实现不同页面间的跳转导航。在UniApp中，可以通过使用Pages.json文件来自定义TabBar菜单，包括菜单样式、页面路径和页面标题等信息。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "tabBar": {
        "text": "首页",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home_selected.png"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      },
      "tabBar": {
        "text": "分类",
        "iconPath": "static/category.png",
        "selectedIconPath": "static/category_selected.png"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      },
      "tabBar": {
        "text": "购物车",
        "iconPath": "static/cart.png",
        "selectedIconPath": "static/cart_selected.png",
        "badge": "2"
      }
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      },
      "tabBar": {
        "text": "我的",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my_selected.png"
      }
    }
  ],
  "tabBar": {
    "color": "#666",
    "selectedColor": "#007aff",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home_selected.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/category/category",
        "iconPath": "static/category.png",
        "selectedIconPath": "static/category_selected.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "static/cart.png",
        "selectedIconPath": "static/cart_selected.png",
        "badge": "2"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/my",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my_selected.png"
      }
    ]
  }
}

在Pages.json文件中，我们先定义多个页面，包括页面路径、导航栏标题和TabBar菜单信息。接着，在全局定义TabBar组件的样式和底部菜单列表。其中，list属性表示菜单项的列表数组，可以通过text、pagePath、iconPath、selectedIconPath、badge等属性来设置菜单项的样式和内容。

通过设置Pages.json文件，我们可以快速实现复杂的TabBar菜单，提升用户体验和应用的可用性。

结语

UniApp作为一款跨平台应用框架，可以让开发者通过一套代码，实现多平台应用的开发。在实际开发中，TabBar菜单和自定义底部菜单是常见的功能需求，通过使用UniApp提供的组件和Pages.json文件，可以轻松实现底部菜单的自定义和TabBar菜单的导航功能，为用户提供更便捷和高效的交互方式。