uniapp使用图鸟ui自定义tabbar

### UniApp 微信小程序自定义 TabBar 并在其右上角显示数字 Badge #### 使用 `pages.json` 配置基础 TabBar 在 UniApp 中，可以通过 `pages.json` 文件中的 `tabBar` 字段来配置基本的 TabBar。然而，对于动态更新 TabBar 上的徽标（badge），则需借助特定 API。 #### 动态设置 TabBar 的 Badge 为了实现在 TabBar 某一项的右上角显示数字，可以利用 `uni.setTabBarBadge()` 函数[^1]： ```javascript // 假设当前是在购物车页面对应的逻辑处理文件中 import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters('m_cart', ['total']), }, onShow() { this.setBadge(); }, methods: { setBadge() { uni.setTabBarBadge({ index: 2, // 这里假设购物车位于第3个位置 (索引从0开始计数) text: String(this.total), // 将数量转换成字符串形式作为文本内容 }); } } } ``` 这段代码展示了如何在一个 Vuex store 存储状态管理插件的帮助下获取商品总数，并调用 `setTabBarBadge` 方法将该数值显示为指定项上的 badge 提示[^3]。 #### 自定义 TabBar 组件化改造 如果希望进一步定制 TabBar 外观或行为，则可考虑采用组件化的方案。这涉及到创建独立的 TabBar 组件并替换默认样式，在此过程中可能需要用到条件渲染指令如 wx:if 控制不同状态下 UI 的呈现方式[^4]。 例如，可以在项目根目录下建立一个新的 Vue 单文件组件用于表示新的 TabBar 结构，再通过修改路由表让应用加载这个新组建而非内置版本。 #### 完整实例说明 下面给出一个完整的例子，它不仅实现了上述功能还包含了必要的错误处理机制以及界面优化建议： ```html <!-- src/components/CustomTabBar.vue --> <template> <!-- 此处省略具体模板细节... --> </template> <script> export default { name: "custom-tab-bar", mounted(){ // 初始化时同步一次数据到视图层 this.syncBadges() }, watch:{ '$store.getters["m_cart/total"]': function(newValue){ // 当购物车内物品数目变化时立即刷新对应标签页的小红点 this.updateCartBadge(newValue); } } methods: { syncBadges(){ const cartCount = this.$store.getters['m_cart/total']; this.updateCartBadge(cartCount); }, updateCartBadge(count){ try{ if(!count || count === 0){ uni.removeTabBarBadge({index : 2}); }else{ uni.setTabBarBadge({ index: 2, text: `${count}` }) } }catch(error){ console.error("Failed to update tab bar badges:", error.message); } } } }; </script> ``` 以上代码片段提供了一个更健壮的方式来管理和维护 TabBar 上的状态指示器，同时也提高了用户体验的一致性和响应速度。

### 创建和使用 UniApp 自定义 TabBar 组件 #### 隐藏原生 TabBar 并引入自定义组件 为了确保自定义 TabBar 正常显示而不被原生 TabBar 覆盖，需调用 `uni.hideTabBar()` 方法来隐藏默认的 TabBar[^4]。 ```javascript // App.vue 中全局初始化时执行 export default { onLaunch() { uni.hideTabBar(); // 隐藏原生 tabbar } } ``` #### 构建自定义 TabBar 父组件结构 构建一个名为 `CustomTabBar` 的 Vue 组件作为父容器，用于控制整体布局与样式： ```html <!-- CustomTabBar.vue --> <template> <view class="custom-tab-bar"> <!-- 子组件区域 --> <slot></slot> </view> </template> <script> export default { name: "CustomTabBar", }; </script> <style scoped lang="scss"> .custom-tab-bar { position: fixed; bottom: 0; width: 100%; background-color: white; box-shadow: 0px -2px 8px rgba(0, 0, 0, .1); z-index: 999; } </style> ``` #### 实现子组件逻辑处理 创建另一个单独的 Vue 文件如 `TabBarItem.vue` 来封装单个标签项的行为: ```html <!-- TabBarItem.vue --> <template> <button @click="handleClick" :class="{ active: isActive }">{{ label }}</button> </template> <script> export default { props: ["label", "path"], computed: { isActive() { const currentPagePath = getCurrentPages().pop()?.route || ''; return new RegExp(`^${this.path}$`).test(currentPagePath); }, }, methods: { handleClick() { if (this.isActive) return; uni.switchTab({ url: `/pages/${this.path}/${this.path}` }); }, }, }; </script> <style scoped> .active { color: blue !important; } button { padding: 15px; border: none; outline: none; font-size: 16px; cursor: pointer; } </style> ``` #### 页面集成自定义 TabBar 最后，在每一个需要展示 TabBar 的页面底部添加上述两个组件实例化后的 HTML 片段，并传入相应参数列表[^3]: ```html <!-- index.vue 或者其他页面文件 --> <template> ... <CustomTabBar> <TabBarItem v-for="(item, idx) in items" :key="idx" :label="item.text" :path="item.page"></TabBarItem> </CustomTabBar> </template> <script> import CustomTabBar from "@/components/CustomTabBar"; import TabBarItem from "@/components/TabBarItem"; export default { components: { CustomTabBar, TabBarItem }, data() { return { items: [ { text: '首页', page: 'home' }, { text: '分类', page: 'category' }, { text: '购物车', page: 'cart' }, { text: '我的', page: 'profile' } ] }; } }; </script> ``` 通过这种方式即可完成一套完整的 UniApp 自定义 TabBar 解决方案。此方法不仅解决了 UI 效果上的局限性，还提供了更灵活的交互方式以及更好的用户体验[^1]。