当前位置：首页 > uni-app

uniapp做底部导航

2026-02-06 08:58:42uni-app

使用uniapp实现底部导航的方法

配置pages.json文件

在uniapp项目中，底部导航栏通过pages.json文件进行配置。需要在tabBar字段中定义导航栏的样式和页面路径。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#FF0000",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ]
  }
}

准备图标资源

在static目录下创建tabbar文件夹，存放导航栏的图标资源。需要准备两种状态的图标：默认状态和选中状态。

文件结构示例：

static/
  tabbar/
    home.png
    home-active.png
    category.png
    category-active.png
    cart.png
    cart-active.png
    user.png
    user-active.png

自定义样式和交互

如果需要更复杂的样式或交互效果，可以通过自定义组件实现。创建一个自定义组件替代原生tabBar，通过vue文件控制样式和逻辑。

<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in list" 
      :key="index" 
      class="tabbar-item"
      :class="{ 'active': currentIndex === index }"
      @click="switchTab(index)"
    >
      <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      list: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/home-active.png"
        },
        {
          pagePath: "/pages/category/category",
          text: "分类",
          iconPath: "/static/tabbar/category.png",
          selectedIconPath: "/static/tabbar/category-active.png"
        },
        {
          pagePath: "/pages/cart/cart",
          text: "购物车",
          iconPath: "/static/tabbar/cart.png",
          selectedIconPath: "/static/tabbar/cart-active.png"
        },
        {
          pagePath: "/pages/user/user",
          text: "我的",
          iconPath: "/static/tabbar/user.png",
          selectedIconPath: "/static/tabbar/user-active.png"
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      uni.switchTab({
        url: this.list[index].pagePath
      });
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  background-color: #FFFFFF;
  border-top: 1px solid #EEEEEE;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabbar-item image {
  width: 24px;
  height: 24px;
}
.tabbar-item text {
  font-size: 12px;
  margin-top: 4px;
}
.active {
  color: #FF0000;
}
</style>