当前位置：首页 > uni-app

uniapp做底部导航

2026-03-05 10:50:34uni-app

底部导航实现方法

在UniApp中实现底部导航通常使用uni-app提供的原生导航栏组件或自定义组件。以下是两种常见的方法：

使用原生导航栏

在pages.json中配置tabBar属性，这是最简单的方式：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "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"
      }
    ]
  }
}

自定义底部导航

如果需要更灵活的样式或功能，可以自定义底部导航组件：

创建组件文件components/tabbar/tabbar.vue：

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

<script>
export default {
  props: {
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [
        {
          pagePath: "/pages/home/home",
          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, path) {
      if (this.currentIndex === index) return
      uni.switchTab({
        url: path
      })
    }
  }
}
</script>

<style>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  background: #fff;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}
.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: #007AFF;
}
</style>

在页面中使用自定义组件：

<template>
  <view>
    <!-- 页面内容 -->
    <tabbar :currentIndex="currentIndex" />
  </view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue'
export default {
  components: {
    tabbar
  },
  data() {
    return {
      currentIndex: 0
    }
  }
}
</script>