在 Uniapp 中，虽然提供了默认的底部导航栏配置方式（通过在 pages.json 中配置 TabBar），但这种方式可能无法满足所有开发者的需求，尤其是当需要实现更加复杂的交互效果或自定义样式时。这时，开发者可以选择自定义底部导航栏。
自定义底部导航栏通常涉及以下几个步骤：
1. 隐藏默认的底部导航栏
首先，你需要在 pages.json 文件中将 tabBar 设置为 false 或完全移除 tabBar 配置，以隐藏默认的底部导航栏。
json复制代码
| { | |
| “tabBar”:false | |
| } |
2. 创建自定义导航栏组件
接下来，你需要创建一个自定义的导航栏组件。这个组件可以包含多个按钮，每个按钮对应一个页面。你可以根据需要设计按钮的样式和布局。
例如，创建一个名为 CustomTabBar.vue 的组件：
vue复制代码
| <template> | |
| <view class=”tab-bar”> | |
| <view class=”tab-bar-item” v-for=”(item, index) in tabList” :key=”index” @click=”navigateTo(item.pagePath)”> | |
| <image :src=”getCurrentIcon(index)” class=”tab-bar-icon”></image> | |
| <text class=”tab-bar-text”>{{ item.text }}</text> | |
| </view> | |
| </view> | |
| </template> | |
| <script> | |
| export default { | |
| data() { | |
| return { | |
| tabList: [ | |
| { pagePath: ‘/pages/index/index’, text: ‘首页’, icon: ‘/static/icons/home.png’, activeIcon: ‘/static/icons/home-active.png’ }, | |
| { pagePath: ‘/pages/discover/discover’, text: ‘发现’, icon: ‘/static/icons/discover.png’, activeIcon: ‘/static/icons/discover-active.png’ }, | |
| // … 其他页面 | |
| ], | |
| currentIndex: 0 // 当前选中的索引 | |
| }; | |
| }, | |
| methods: { | |
| navigateTo(pagePath) { | |
| uni.navigateTo({ | |
| url: pagePath | |
| }); | |
| // 注意：这里使用的是 navigateTo 方法，它会导致页面栈增加。如果你希望替换当前页面而不是增加新页面，可以使用 redirectTo 方法。 | |
| // 但是，由于我们是自定义的底部导航栏，通常希望保持页面栈的一致性，因此可以在页面跳转后，通过某种方式（如全局事件总线或 Vuex）通知自定义导航栏组件更新当前选中的索引。 | |
| // 这里为了简化示例，没有实现这一逻辑。 | |
| }, | |
| getCurrentIcon(index) { | |
| return this.currentIndex === index ? this.tabList[index].activeIcon : this.tabList[index].icon; | |
| } | |
| }, | |
| // … 可能还需要添加监听页面变化来更新 currentIndex 的逻辑，这里省略。 | |
| }; | |
| </script> | |
| <style scoped> | |
| .tab-bar { | |
| /* … 样式 */ | |
| } | |
| .tab-bar-item { | |
| /* … 样式 */ | |
| } | |
| .tab-bar-icon { | |
| /* … 样式 */ | |
| } | |
| .tab-bar-text { | |
| /* … 样式 */ | |
| } | |
| </style> |
3. 在页面中使用自定义导航栏组件
然后，你需要在每个需要使用底部导航栏的页面中引入并使用这个自定义组件。但是，由于底部导航栏通常是全局的，你可能希望它只出现一次而不是在每个页面中都重复。
一种常见的做法是在 App.vue 中引入并使用这个组件，并通过某种方式（如全局状态管理）来控制它的显示和隐藏以及当前选中的项。然而，这种方法可能会遇到一些问题，比如页面切换时底部导航栏不会跟着更新。
另一种更灵活的做法是使用一个专门的“容器”页面来包裹其他页面，并在这个“容器”页面中引入自定义导航栏组件。这样，你就可以在这个“容器”页面中控制导航栏的显示和隐藏，并通过监听页面变化来更新导航栏的状态。
不过，这种方法需要额外的页面结构和逻辑来处理页面之间的跳转和状态同步。
4. 处理页面跳转和状态同步
无论你选择哪种方法，都需要处理页面跳转和状态同步的问题。这通常涉及到监听页面变化事件（如 onShow、onHide 等）以及使用全局状态管理（如 Vuex）来存储和更新导航栏的状态。
注意事项
- 自定义底部导航栏需要开发者自行处理页面之间的跳转逻辑和状态同步问题。
- 由于自定义导航栏不是 uni-app 内置的组件，因此它不会自动与页面栈同步。开发者需要自行实现这一逻辑。
- 自定义导航栏的样式和布局完全由开发者控制，因此可以实现更加灵活和个性化的设计。但是，这也意味着开发者需要投入更多的时间和精力来进行设计和开发。
总之，自定义底部导航栏虽然提供了更大的灵活性和个性化空间，但也增加了开发和维护的复杂度。开发者在选择是否使用自定义导航栏时，需要权衡这些因素并根据自己的实际需求做出决策。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
