新手指南：WX 小程序 Tabbar 隐藏大揭秘

作为一名卑微的小编，我也曾经历过无数次与 WX 小程序 Tabbar 纠缠不清的时刻。在这个 Tabbar 起起伏伏的背后，隐藏着许多鲜为人知的秘密。今天，就让我用幽默风趣的语言，手把手带你揭开 Tabbar 隐藏的谜团吧！

云一：Tabbar 消失术，藏在何处？

为了让我们的 Tabbar 神秘消失，我们需要进入 WX 小程序的神秘基地——app.js。在这个文件中，有一个神奇的变量，它就是tabBar。这个变量控制着 Tabbar 的一切，包括它的隐藏与显现。

// app.js

const app = getApp();

app.globalData = {

tabBar: {

list: [{

pagePath: 'pages/home/home',

iconPath: 'static/tabbar/home.png',

selectedIconPath: 'static/tabbar/home-active.png',

text: '首页'

pagePath: 'pages/about/about',

iconPath: 'static/tabbar/about.png',

selectedIconPath: 'static/tabbar/about-active.png',

text: '关于'

在这个代码中，我们定义了 Tabbar 的配置项，包括每个 Tab 的页面路径、图标以及文字。默认情况下，Tabbar 是显示的，但我们可以通过修改tabBar.visible属性来控制它的可见性。

step1：隐藏 Tabbar

app.globalData.tabBar.visible = false;

step2：显示 Tabbar

app.globalData.tabBar.visible = true;

云二：Tabbar 高空作业，如何到达顶端？

通常情况下，Tabbar 位于屏幕的底部。但有时候，我们希望它能够飞到顶部，为页面内容腾出更多的空间。这就需要我们动用一些黑科技了——自定义 Tabbar。

// 自定义tabbar/index.wxml

在 custom-tabbar 这个自定义组件中，我们创建了与原 Tabbar 相似的结构。然后，我们需要在 app.js 中将这个自定义组件设置为全局组件。

// app.js

import CustomTabbar from './components/custom-tabbar';

const app = getApp();

Component({

properties: {

lifetimes: {

attached: function () {

this.setData({

tabBarList: app.globalData.tabBar.list

methods: {

handleTabChange: function (e) {

// tab 点击事件处理

我们在页面的 json 文件中使用这个自定义组件。

// 页面json文件

"usingComponents": {

"custom-tabbar": "/components/custom-tabbar/index"

云三：消失的 Tabbar，如何优雅重现？

当 Tabbar 隐藏时，我们可能希望在用户触发某些操作后，让它重新出现。此时，就需要使用 wx.showTabBar API 了。

wx.showTabBar({

animation: true

这个 API 可以平滑地显示 Tabbar，并提供了 animation 参数，用于控制是否需要过渡动画。

云四：想看就想看，Tabbar 点亮小红点

在 Tabbar 上显示红点，可以提示用户有未读消息或其他重要信息需要关注。通过 wx.showTabBarRedDot API，我们可以轻松地为 Tabbar 项添加红点。

wx.showTabBarRedDot({

index: 1

其中，index 参数指定要显示红点的 Tabbar 项索引。同样，我们也可以通过 wx.hideTabBarRedDot API 隐藏 Tabbar 项上的红点。

云五：避开 App Review，巧藏 Tabbar 小尾巴

在 App Review 中，隐藏 Tabbar 可能会被判定为违规行为。为了规避风险，我们可以使用一种迂回战术——自定义导航栏，并在导航栏中嵌入 Tabbar 样式元素。

// 页面wxml文件

这样一来，我们在 App Review 中展示的只是自定义导航栏，而 Tabbar 样式元素则被巧妙地隐藏在了导航栏中，既满足了用户需求，又避免了 App Review 风险。

各位亲爱的小伙伴们，看完这篇文章，大家对 WX 小程序 Tabbar 的隐藏术是不是有了更深刻的理解呢？如果您在实践过程中遇到了什么或者有什么新的心得体会，欢迎留言分享，让我们一起探讨 WX 小程序开发的奥秘！