uniapp新增tabbar

### 如何在 UniApp 中新增 TabBar 组件及配置方法 #### 创建自定义 TabBar 组件 为了实现更灵活的定制化需求，在 UniApp 应用中创建一个新的 `TabBar` 组件是一个常见做法。这可以通过建立一个独立的 Vue 文件来完成，该文件专门用于管理底部导航栏的内容。 ```vue <template> <view class="custom-tab-bar"> <!-- 这里放置具体的 tab bar item --> <block v-for="(item, index) in tabBarList" :key="index"> <navigator url="/pages/index/index" hover-class="none" class="tab-bar-item" ><image :src="selected === index ? item.selectedIconPath : item.iconPath"></image> <text :class="{ active: selected === index }">{{ item.text }}</text></navigator > </block> </view> </template> <script> export default { props: ['selected'], data() { return { tabBarList: [ { text: '首页', iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png' }, { text: '发现', iconPath: '/static/tabbar/discover.png', selectedIconPath: '/static/tabbar/discover-active.png' }, { text: '我的', iconPath: '/static/tabbar/mine.png', selectedIconPath: '/static/tabbar/mine-active.png' } ] }; } }; </script> <style scoped> .custom-tab-bar { display: flex; } .tab-bar-item { /* 定义样式 */ } .active { color: red; /* 当前选中的颜色 */ } </style> ``` 此代码片段展示了如何构建一个简单的自定义 `TabBar` 组件[^1]。 #### 使用自定义 TabBar 并替换默认行为 当应用启动时，默认情况下会显示系统的 `TabBar` 。对于某些特定场景下（如不同用户角色），可能需要动态调整 `TabBar` 的内容或完全移除它并替换成自己的版本。此时可以利用 API 函数 `uni.hideTabBar()` 来隐藏原有的 `TabBar` ，之后再引入之前创建好的自定义组件[^2]。 需要注意的是，在 App.vue 或者全局配置文件中直接设置 `hideTabBar` 可能不会按预期工作；因此建议在具体页面加载完成后执行上述操作。 #### 动态改变 TabBar 数量与内容 针对具有多种用户身份的应用程序来说，能够根据不同条件展示不同的 `TabBar` 是非常重要的功能之一。通过监听用户的登录状态或者其他业务逻辑判断依据，可以在适当的时候更新 `TabBar` 上的信息，包括但不限于图标、文字描述以及链接地址等[^3]。 例如： ```javascript // 假设存在两种类型的用户：普通用户和管理员 if (isAdminUser()) { this.tabBarList.push({ text: "管理", iconPath: "/static/tabbar/admin.png", selectedIconPath: "/static/tabbar/admin-active.png" }); } else { // 对于非管理员用户做相应处理... } ``` 这段 JavaScript 脚本说明了基于用户权限向 `TabBar` 添加额外项的方法。 #### 解决样式穿透问题 有时开发者可能会遇到一个问题——即尝试使用 `/deep/` 修改子组件内部 CSS 类名的效果不佳的情况。这是因为部分框架对作用域样式的解析机制所致。解决办法通常涉及调整项目的 Webpack 配置或是寻找替代方案，比如借助第三方库的帮助或者重新设计组件结构以避免此类冲突的发生[^4]。