更新记录

1.0.0（2026-11-03）

【1.0.0】2026-11-03

1. 首发：圆角悬浮自定义底部导航组件 lc-tabbar
2. 支持 list 配置、背景/选中色、高度与边距、角标 99+
3. 支持 pagePath + switchTab，及 v-model 非 tab 模式
4. 提供 js_sdk：safeHideTabBar、useHideNativeTabBar、tabbarIconPaths
5. Vue3，H5/App/主流小程序；详见 readme 接入步骤

平台兼容性

uni-app(3.8.10)

lc-tabbar

圆角悬浮 自定义 TabBar（Vue3），与 pages.json 原生 tabBar 配合：保留原生 tab 路由与 switchTab，界面由组件绘制。

安装

将 uni_modules/lc-tabbar 复制到目标项目的 uni_modules 目录，或在 DCloud 插件市场导入（包名 lc-tabbar）。
无需手动 import 组件，遵循 easycom 规则，直接使用 <lc-tabbar />。

使用前配置

1. 在 pages.json 配置原生 tabBar.list（与 uni-app 文档一致）。
2. 在每个 tab 页底部放置 <lc-tabbar :list="list" />。
3. 在 App.vue 全局样式中隐藏原生 tabBar 占位（可选但推荐）：

uni-tabbar,
.uni-tabbar-bottom {
    display: none !important;
    height: 0 !important;
}
uni-tabbar .uni-placeholder,
.uni-tabbar-bottom .uni-placeholder {
    display: none !important;
    height: 0 !important;
}

4. tab 页 onShow 时隐藏原生栏（组件 hideTabBar=true 会在 mount 调一次；切换 tab 建议再配合 hook）：

import { useHideNativeTabBar } from "@/uni_modules/lc-tabbar/js_sdk/index.js";

useHideNativeTabBar();

基本用法

<template>
    <view class="page">
        <!-- 页面内容 -->
        <lc-tabbar :list="tabList" />
    </view>
</template>

<script setup>
import { tabbarIconPaths } from "@/uni_modules/lc-tabbar/js_sdk/index.js";

const tabList = [
    {
        pagePath: "/pages/index/index",
        text: "首页",
        ...tabbarIconPaths("/static/tabbar", "home"),
    },
    {
        pagePath: "/pages/index/mine",
        text: "我的",
        ...tabbarIconPaths("/static/tabbar", "mys"),
    },
];
</script>

自定义颜色与尺寸

<lc-tabbar
    :list="tabList"
    :bg-color="#FFFFFF"
    :active-color="#333333"
    :inactive-color="#999999"
    :active-bg-color="#E6F7F4"
    :height="140"
    :icon-size="56"
    :bottom-gap="20"
    :horizontal-inset="32"
/>

角标

list 项设置 badge: number，大于 0 时显示；超过 99 显示 99+。

国际化（textKey）

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

<lc-tabbar :list="list" :translate="t" />

list 项使用 textKey: '首页' 而非写死 text。

非 tab 路由模式

省略 pagePath，用 v-model / @change 切换：

<lc-tabbar v-model="current" :list="[{ text: 'A' }, { text: 'B' }]" />

API

Props

list 项

Events

• change / update:modelValue：无 pagePath 时切换
• click：{ index, item }

js_sdk

• safeHideTabBar() — 安全隐藏原生 tabBar
• useHideNativeTabBar() — tab 页 onShow 隐藏
• tabbarIconPaths(dir, base) — 生成图标路径
• mapPagesJsonTabBarList(list) — 从 pages.json 结构映射

平台

Vue3：H5、App-vue、主流小程序。nvue 需自行嵌入样式（本插件未含 nvue 版）。

更新日志

见 changelog.md