uniapp自定义底部tabbar

好的，您想了解如何在uniapp中自定义底部tabbar吗？可以使用uni-navbar插件来实现自定义tabbar效果。您可以通过设置tabbar的背景色、选中文字颜色、未选中文字颜色、图标等属性来自定义tabbar。另外，您也可以使用uni-icons和字体图标库来为每个选项卡添加图标。希望能对您有所帮助。

uniapp 自定义底部tabbar

创建自定义底部 TabBar

在 components 目录下建立一个新的组件文件名为 CustomTabBar.vue 来开发自定义组件[^1]。

<template>
  <view class="custom-tab-bar">
    <!-- 定义底部导航栏的内容 -->
    <view v-for="(item, index) in tabBarList" :key="index" @click="switchPage(item.pagePath)">
      <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
      <text :class="{ active: currentIndex === index }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
})

// 底部标签栏列表数据
const tabBarList = [
  { pagePath: '/pages/index/index', iconPath: '/static/images/home.png', selectedIconPath: '/static/images/home-active.png', text: '首页' },
  { pagePath: '/pages/category/index', iconPath: '/static/images/category.png', selectedIconPath: '/static/images/category-active.png', text: '分类' },
  { pagePath: '/pages/my/index', iconPath: '/static/images/my.png', selectedIconPath: '/static/images/my-active.png', text: '我的' }
]

let currentIndex = ref(props.current)

function switchPage(pagePath) {
  uni.switchTab({ url: pagePath })
}
</script>

<style scoped>
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}

.active {
  color: blue;
}
</style>

此代码展示了如何构建一个简单的自定义底部 TabBar 组件，其中包含了三个选项卡：“首页”，“分类” 和 “我的”。每个项都有未选中状态下的图标路径 (iconPath) 和选中状态下图标路径 (selectedIconPath)。当点击某个项目时会触发 switchPage() 方法来切换页面[^2]。

为了使这个自定义组件生效，在需要显示的地方引入并注册该组件：

<!-- BaseApp/pages/my.vue 文件中的模板部分 -->
<template>
  <view>
    <text class="title">{{ title }}</text>
    <custom-tab-bar :current="2"></custom-tab-bar> <!-- 使用自定义组件 -->
  </view>
</template>

<script setup>
import CustomTabBar from '../../components/CustomTabBar.vue'
import { ref } from 'vue'

let title = ref('我的')
</script>

这里通过 <custom-tab-bar> 标签使用了之前创建好的自定义组件，并传递了一个属性 current 表示当前激活的是第三个选项卡（索引从零开始计数），即 "我的"。