uniapp自定义tabbar组件

### 自定义 TabBar 的实现方法 在 UniApp 开发中，自定义 TabBar 提供了一种灵活的方式来增强用户体验并满足特定需求。以下是详细的实现方法和注意事项。 #### 1. 配置 `pages.json` 文件 为了启用自定义 TabBar 功能，在项目的配置文件 `pages.json` 中需添加如下字段： ```json { "tabBar": { "custom": true, // 启用自定义 TabBar 只对小程序生效 "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] } } ``` 此部分配置用于声明页面路径以及文字描述[^2]。 --- #### 2. 创建自定义 TabBar 组件 创建一个新的 Vue 文件作为自定义 TabBar 组件，例如命名为 `CustomTabBar.vue`。该组件应具备动态切换功能，并支持图标高亮显示。 ##### 示例代码：`CustomTabBar.vue` ```vue <template> <view class="tab-bar"> <block v-for="(item, index) in tabList" :key="index"> <view class="tab-item" :class="{ active: currentIndex === index }" @click="switchTab(item.pagePath)" > <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" ></image> <text>{{ item.text }}</text> </view> </block> </view> </template> <script> export default { data() { return { currentIndex: 0, tabList: [ { pagePath: "/pages/index/index", text: "首页", iconPath: "/static/icons/home.png", // 默认图标 selectedIconPath: "/static/icons/home-active.png" // 高亮图标 }, { pagePath: "/pages/logs/logs", text: "日志", iconPath: "/static/icons/log.png", selectedIconPath: "/static/icons/log-active.png" } ] }; }, methods: { switchTab(url) { if (this.$route.path !== url) { uni.switchTab({ url }); } } }, onShow() { const currentRoute = this.$route.path; this.tabList.forEach((item, index) => { if (currentRoute === item.pagePath) { this.currentIndex = index; } }); } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; height: 100rpx; background-color: white; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .active text { color: blue; /* 当前选中的颜色 */ } image { width: 48rpx; height: 48rpx; } </style> ``` 以上代码实现了基本的自定义 TabBar 功能，包括动态加载当前页签状态、图片切换逻辑等[^1]。 --- #### 3. 解决逆序点击问题 当用户快速逆序点击 TabBar 图标时可能出现路径与高亮不一致的情况。解决办法是在每次跳转之前重新同步当前索引值至实际路由状态。 通过监听生命周期函数 `onShow()` 来更新当前激活项的状态，从而避免因异步操作引起的视觉错乱现象[^2]。 --- #### 4. 使用全局注册方式引入组件 为了让所有页面都能访问到这个自定义 TabBar，可以将其挂载到应用根节点下或者单独封装成插件形式调用。 示例代码片段： ```javascript // main.js 或 app.vue 中初始化 Vue.prototype.$CustomTabBar = require('@/components/CustomTabBar.vue'); ``` 随后在需要展示的地方直接渲染即可完成绑定。 --- ### 总结 综上所述，通过合理调整配置参数配合前端框架特性能够轻松构建出符合业务场景所需的个性化导航条结构[^1][^2]。