uniapp自定义底部tabbar 全局使用

### 创建 UniApp 全局可用的自定义底部 TabBar 在 UniApp 中实现一个全局可用的自定义底部 TabBar 是通过配置 `manifest.json` 文件以及引入自定义组件完成的。以下是具体方法和示例： #### 1. 配置 manifest.json 为了启用自定义 tabBar 功能，需修改项目的 `manifest.json` 文件，在 `"mp-weixin"` 或通用设置部分添加如下字段： ```json { "usingComponents": true, "tabBar": { "custom": true, // 启用自定义 tabBar "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/category/category", "text": "分类" } ] } } ``` 上述代码启用了自定义 tabBar 并设置了两个页面路径作为默认选项[^1]。 --- #### 2. 编写自定义 TabBar 组件 创建一个新的 Vue 组件用于表示自定义 tabBar 的结构与样式。假设该组件位于 `components/tabbar/CustomTabBar.vue`，其内容如下所示： ```vue <template> <view class="tab-bar"> <view v-for="(item, index) in tabList" :key="index" @click="switchPage(item.pagePath)" class="tab-item" :class="{ active: currentIndex === index }"> {{ item.text }} </view> </view> </template> <script> export default { data() { return { tabList: [ { pagePath: '/pages/index/index', text: '首页' }, { pagePath: '/pages/category/category', text: '分类' } ], currentIndex: 0 // 当前选中的索引 }; }, methods: { switchPage(pagePath) { uni.switchTab({ url: pagePath }); } }, onLoad(option) { if (option && option.current) { this.currentIndex = parseInt(option.current); // 接收当前激活项参数 } } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; background-color: #f8f8f8; border-top: 1px solid #ddd; } .tab-item { padding: 10px; font-size: 14px; } .active { color: blue; /* 设置选中状态的颜色 */ } </style> ``` 此组件实现了动态切换页面的功能，并允许接收外部传入的激活项参数[^3]。 --- #### 3. 注册并使用自定义 TabBar 在项目入口文件 `main.js` 中注册刚才编写的自定义 tabBar 组件，以便在整个应用范围内生效： ```javascript import CustomTabBar from '@/components/tabbar/CustomTabBar.vue'; Vue.component('CustomTabBar', CustomTabBar); ``` 接着，在需要显示 tabBar 的页面模板中加入 `<CustomTabBar>` 标签即可。如果希望自动传递当前页码，则可以在跳转时附加 URL 参数，例如： ```javascript uni.navigateTo({ url: `/pages/some-page/some-page?current=${currentIndex}` }); ``` 其中 `${currentIndex}` 表示当前页面对应的索引值[^2]。 --- ### 总结 以上展示了如何利用 UniApp 提供的 `custom-tab-bar` 字段构建一个灵活且可扩展性强的自定义底部导航栏。它不仅能够满足基础需求，还支持更多个性化定制操作。