更新记录

1.0.0（2025-11-10） 下载此版本

更新日志

[1.0.0] - 2025-11-10

新增功能

• 首次发布
• 圆角卡片式设计，支持阴影效果
• 支持中间凸起按钮设计
• 双色图标自动切换（激活/未激活状态）
• 支持自定义颜色配置（激活色、默认色、背景色、中间按钮色等）
• 支持自定义圆角大小
• 支持宽屏适配
• 支持多语言配置
• 支持暗黑模式适配
• 支持多平台（微信小程序、支付宝小程序、H5、App 等）
• 使用 Vue 3 Composition API + TypeScript 开发
• 支持 uni_modules 规范，一键导入

文档

• 完整的 README 使用文档
• 提供详细的使用示例和代码演示
• 提供 NPM 发布指南
• 常见问题解答

版本规范说明

• 主版本号：不兼容的 API 修改
• 次版本号：向下兼容的功能性新增
• 修订号：向下兼容的问题修正

计划中的功能

• [ ] 支持角标显示
• [ ] 支持动画效果
• [ ] 支持更多自定义配置
• [ ] 提供更多预设主题

如果有建议或遇到问题，欢迎在插件市场评论区反馈！

平台兼容性

uni-app(3.6.15)

其他

gq-tabbar 自定义底部导航栏

📱 组件简介

一个美观现代的自定义底部导航栏组件，采用圆角卡片式设计，支持中间凸起按钮，适用于外卖、商城、扫码等多种场景。

✨ 特性

• 🎨 现代设计 - 圆角卡片式底栏，悬浮阴影效果
• 🔘 凸起按钮 - 支持中间按钮凸起设计，突出核心功能
• 🎯 双色切换 - 自动切换激活/未激活图标
• 🛠️ 高度可配置 - 支持自定义颜色、圆角等样式
• 📦 开箱即用 - 简单配置即可使用
• 🚀 性能优秀 - 使用 Vue 3 Composition API
• 📱 多端支持 - 支持微信小程序、H5、App 等多个平台

📦 安装

方式一：通过插件市场导入（推荐）

1. 打开 DCloud 插件市场
2. 搜索 gq-tabbar
3. 点击 使用 HBuilderX 导入插件

方式二：手动导入

将 uni_modules/gq-tabbar 文件夹复制到你的项目根目录下的 uni_modules 文件夹中。

🚀 快速开始

1. 配置 pages.json

在 pages.json 中配置 tabBar 页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/order/order",
      "style": {
        "navigationBarTitleText": "点单"
      }
    },
    {
      "path": "pages/scan/scan",
      "style": {
        "navigationBarTitleText": "扫码"
      }
    },
    {
      "path": "pages/orders/orders",
      "style": {
        "navigationBarTitleText": "订单"
      }
    },
    {
      "path": "pages/mine/mine",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "custom": true,
    "list": [
      { "pagePath": "pages/index/index" },
      { "pagePath": "pages/order/order" },
      { "pagePath": "pages/scan/scan" },
      { "pagePath": "pages/orders/orders" },
      { "pagePath": "pages/mine/mine" }
    ]
  }
}

注意： custom: true 表示使用自定义 tabBar。

2. 在每个 TabBar 页面中使用组件

在每个需要显示 tabBar 的页面中引入组件：

<template>
  <view class="page">
    <!-- 你的页面内容 -->
    <view class="content">
      <text>首页内容</text>
    </view>

    <!-- 自定义 TabBar -->
    <gq-tabbar :tab-list="tabList" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tabList = ref([
  {
    pagePath: '/pages/index/index',
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home-active.png'
  },
  {
    pagePath: '/pages/order/order',
    text: '点单',
    iconPath: '/static/tabbar/order.png',
    selectedIconPath: '/static/tabbar/order-active.png'
  },
  {
    pagePath: '/pages/scan/scan',
    iconPath: '/static/tabbar/scan.png',
    isCenter: true  // 标记为中间凸起按钮
  },
  {
    pagePath: '/pages/orders/orders',
    text: '订单',
    iconPath: '/static/tabbar/orders.png',
    selectedIconPath: '/static/tabbar/orders-active.png'
  },
  {
    pagePath: '/pages/mine/mine',
    text: '我的',
    iconPath: '/static/tabbar/mine.png',
    selectedIconPath: '/static/tabbar/mine-active.png'
  }
])
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding-bottom: 160rpx; /* 为 tabbar 预留空间 */
}
</style>

📖 API 文档

Props

TabItem 配置项

暴露的方法

🎨 自定义样式示例

修改主题色

<gq-tabbar 
  :tab-list="tabList"
  active-color="#FF6B6B"
  normal-color="#CCCCCC"
  background-color="#F8F8F8"
  center-button-color="#FF6B6B"
  border-radius="80rpx"
/>

使用 ref 调用方法

<template>
  <gq-tabbar ref="tabbarRef" :tab-list="tabList" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tabbarRef = ref()

// 跳转到第 3 个 Tab
const goToOrders = () => {
  tabbarRef.value.switchTab(3)
}

// 获取当前索引
const getCurrentTab = () => {
  const index = tabbarRef.value.getCurrentIndex()
  console.log('当前 Tab 索引:', index)
}
</script>

📝 注意事项

1. 图标资源

   • 建议图标尺寸：88rpx × 88rpx（@2x）或 132rpx × 132rpx（@3x）
   • 支持格式：png、jpg、svg
   • 建议使用透明背景的 PNG 图标

2. 页面底部留白

   • 需要为每个 TabBar 页面底部预留空间（建议 160rpx）
   • 避免内容被 TabBar 遮挡

3. 路径配置

   • pagePath 必须以 / 开头
   • 路径要与 pages.json 中配置的路径一致

4. 中间按钮

   • 使用 isCenter: true 标记中间按钮
   • 中间按钮可以不设置 text 属性
   • 建议只设置一个中间按钮

📸 效果预览

🔧 常见问题

Q: TabBar 不显示？

A: 检查 pages.json 中是否配置了 "custom": true

Q: 点击无反应？

A: 确认 pagePath 是否正确，是否在 pages.json 的 tabBar.list 中配置

Q: 中间按钮位置不对？

A: 确保中间按钮在 tabList 数组的中间位置（建议 5 个按钮时放在索引 2）

Q: 如何修改 TabBar 高度？

A: 修改组件中的 .tabbar 样式的 height 属性

📄 更新日志

查看 CHANGELOG.md

📜 开源协议

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

💬 联系作者

如有问题或建议，欢迎通过以下方式联系：

• 插件市场评论区留言
• 提交 Issue

如果这个插件对你有帮助，请给个 ⭐️ Star 支持一下！