当前位置：首页 > uni-app

uniapp选项卡配置

2026-02-06 16:54:59uni-app

uniapp选项卡配置方法

在uniapp中配置选项卡通常使用uni-app自带的tabBar配置，适用于底部或顶部导航栏。

配置文件路径 在pages.json中进行配置，通常在项目根目录下。

基础配置示例

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ]
  }
}

参数说明

color: 默认文字颜色
selectedColor: 选中时文字颜色
backgroundColor: 背景色
borderStyle: 边框颜色
list: 选项卡数组
- pagePath: 页面路径
- text: 显示文字
- iconPath: 默认图标路径
- selectedIconPath: 选中时图标路径

注意事项

选项卡页面必须放在pages数组的前几位
图标建议使用40x40像素的图片
页面路径不要加后缀名
每个选项卡都需要在pages中注册

自定义选项卡 如需高度自定义，可以不使用tabBar配置，改用自定义组件实现：

创建components/tabbar.vue组件
在需要显示的页面引入该组件
通过v-if或路由监听控制显示状态

示例自定义组件代码

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

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      color: '#999',
      selectedColor: '#007AFF',
      list: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png'
        },
        {
          pagePath: '/pages/user/user',
          text: '我的',
          iconPath: '/static/tabbar/user.png',
          selectedIconPath: '/static/tabbar/user-active.png'
        }
      ]
    }
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: item.pagePath
      })
    }
  }
}
</script>

平台差异说明