uniapp中实现自定义Tabbar

在 app 或者小程序中经常可以看到类似下图这种形式的 Tabbar，中间的按钮会比较突出：

这种形式的 Tabbar 就需要自定义一个页面来完成了。

隐藏原生 tabber

首先 pages.json 文件中去掉 tabber 属性

或者通过 uni.hideTabBar 来隐藏系统的 Tabbar，此方法的作用范围是全局

onLaunch: function() {
    uni.hideTabBar()
}

如果只希望作用于局部，可以在页面生命周期 onShow 的时候调用 hideTabBar，onHide 的时候调用 showTabBar。关于 tabbar 的操作，可参考 设置 tabbar

自定义 tabber

建立一个 tabbar.vue 文件，文件中包含 Tabbar 的逻辑以及页面切换的逻辑，每个按钮对应的页面通过控制组件的显隐来实现。代码结构如下，也可以将名称图标路径等封装成数组来实现：