{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Tabbar",
    "navigationBarTextStyle": "black"
  }
}

在上述代码里，pages 字段列出了小程序包含的页面路径，window 字段对小程序窗口的一些通用样式进行了配置。后续你会在这个配置文件里添加 TabBar 的相关配置。

步骤一：在 IDE 新建小程序项目

具体步骤请参见创建小程序项目。

步骤二：创建页面

在 pages 目录下创建 index 和 detail 两个页面的文件夹及相关文件。

•

在 pages 目录下新建 index 文件夹，在其中创建 index.ttml、index.ttss、index.js 和 index.json 文件。

•

在 pages 目录下新建 detail 文件夹，在其中创建 detail.ttml、detail.ttss、detail.js 和 detail.json 文件。

Index

index.ttml

index.ttss

index.js

index.json

<view class="container">
  <text>这是首页</text>
</view>

detail

detail.ttml

detail.ttss

detail.js

detail.json

<view class="container">
  <text>这是详情页</text>
</view>

两个页面创建完成后，由于没有跳转链接，也没有配置 Tabbar，只能通过改变 app.json 中 pages 的顺序来浏览两个页面，第一个页面为小程序的默认首页。

步骤三：配置 tabBar

打开 app.json 文件，添加 TabBar 配置项。假设你已经准备好了 index 和 detail 对应的 TabBar 图标，图标存放在 images/tabbar 目录下。

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ffffff",
    "backgroundColor": "#000000",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "images/tabbar/detail.png",
        "selectedIconPath": "images/tabbar/detail_selected.png"
      }
    ]
  }
}

代码解释：

•

pages 数组：列出了小程序包含的所有页面路径，这里包含 index 和 detail 页面。

•

tabBar 配置：

◦

color：未选中状态下 tabBar 文字的颜色。

◦

selectedColor：选中状态下 tabBar 文字的颜色。

◦

backgroundColor：tabBar 的背景颜色。

◦

borderStyle：tabBar 边框的颜色。

◦

list 数组：包含每个 Tab 项的配置。

▪

pagePath：点击该 Tab 项时要跳转的页面路径。

▪

text：Tab 项显示的文字。

▪

iconPath：未选中状态下的图标路径。需要按配置创建对应路径并上传图片。

▪

selectedIconPath：选中状态下的图标路径。需要按配置创建路对应径并上传图片。

配置完成后，小程序可以正常显示首页和详情页 tab。

到这里，tabBar 已经开发完成。不过实际使用时，tabBar 还会有一些其它功能，接下来讲这些这些功能，在实际中，可以根据具体需求选择。

步骤四：隐藏或显示 TabBar

在上述教程中，TabBar 默认是显示的，但在某些场景下，可以隐藏 TabBar，隐藏后，也可以重新显示。

在页面加载时隐藏 TabBar

如果你希望在某个页面加载时就隐藏 TabBar，可以在该页面的生命周期函数 onLoad 中调用 tt.hideTabBar。

在 pages/detail/detail.js 文件中添加如下代码：

Page({
    data: {
        // 页面数据
    },
    onLoad() {
        // 调用 tt.hideTabBar 方法隐藏 TabBar
        tt.hideTabBar({
            animation: true, // 是否需要动画效果，true 表示需要，false 表示不需要
            success() {
                console.log('TabBar 隐藏成功');
            },
            fail(err) {
                console.error('TabBar 隐藏失败', err);
            }
        });
    }
});

代码解释：

•

tt.hideTabBar 方法：用于隐藏 TabBar。

•

animation 参数：一个布尔值，true 表示隐藏 TabBar 时带有动画效果，false 则表示无动画效果。

•

success 回调：当 TabBar 隐藏成功时触发，会在控制台输出提示信息。

•

fail 回调：若隐藏失败，会触发此回调并在控制台输出错误信息。

配置完成后，在进入详情页时，Tabbar 会隐藏。

在特定事件触发时隐藏 TabBar

如果你想在某个特定事件（如点击按钮）触发时隐藏 TabBar，可以在事件处理函数中调用 tt.hideTabBar。

在 detail.ttml 中添加一个按钮。

<view class="container">
    <text>这是详情页</text>
    <button id="text" bindtap="hideTabBar">隐藏 Tabbar</button>
</view>

在 detail.js 中添加对应的事件处理函数。

hideTabBar() {
        tt.hideTabBar({
            animation: true,
            success() {
                console.log('TabBar 隐藏成功');
            },
            fail(err) {
                console.error('TabBar 隐藏失败', err);
            }
        });
    }

配置完成后，在进入详情页时会显示Tabbar，点击隐藏 Tabbar 才会隐藏。

重新显示 TabBar

如果你后续需要重新显示 TabBar，可以调用 tt.showTabBar，用法与 tt.hideTabBar 类似。

在 detail.ttml 中添加一个按钮。

<view class="container">
    <text>这是详情页</text>
    <button id="text" bindtap="showTabBar">显示 Tabbar</button>
    <button id="text" bindtap="hideTabBar">隐藏 Tabbar</button>
</view>

在 detail.js 中添加对应的事件处理函数。

showTabBar() {
        // 点击按钮显示 TabBar
        tt.showTabBar({
            animation: true,
            success() {
                console.log('TabBar 显示成功');
            },
            fail(err) {
                console.error('TabBar 显示失败', err);
            }
        });
    }

配置完成后，页面的逻辑是：

进入详情页，页面加载时，隐藏 Tabbar。

点击显示 Tabbar 按钮，显示 Tabbar。

点击隐藏 Tabbar 按钮，再次隐藏 Tabbar。

步骤五：在 TabBar 某一项的右上角显示红点

tt.showTabBarRedDot 用于在 Tab 项的右上角显示一个红点，通常用于提醒用户有新消息、未读通知或待处理事项等。以下为你详细介绍其使用场景和用法。

使用场景

•

消息提醒：当用户有新的聊天消息、系统通知等未读消息时，在 TabBar 对应的 “消息” 项上显示红点，提示用户有新内容。例如，社交类小程序，当有新的好友动态、私信消息时，在 “消息” tab 上显示红点。

•

任务提醒：若存在待办任务，像待支付订单、待审核内容等，在相应的 tab 上显示红点。例如，电商类小程序，当用户有未支付的订单时，在 “我的订单” tab 上显示红点。

•

活动提醒：有新的活动、优惠信息时，在相关的 tab 上显示红点，吸引用户点击查看。例如，生活服务类小程序，有新的优惠券活动时，在 “优惠活动” tab 上显示红点。

添加红点

本教程中有 2 个 tab，索引分别为 0、1，当有新消息时，要在索引为 1 的 “详情” tab 上显示红点，在 pages/detail/detail.js 中添加如下代码：

Page({
    onLoad() {
        // 模拟获取到新消息
        const hasNewMessage = true;
        if (hasNewMessage) {
            tt.showTabBarRedDot({
                index: 1, // 要显示红点的 tabBar 项的索引
                success() {
                    console.log('红点显示成功');
                },
                fail(err) {
                    console.error('红点显示失败', err);
                },
                complete() {
                    console.log('显示红点操作结束');
                }
            });
        }
    }
});

移除红点

若新消息已被处理，或者待办任务已完成，可使用 tt.hideTabBarRedDot 方法移除红点，示例如下：

tt.hideTabBarRedDot({
    index: 1, // 要移除红点的 tabBar 项的索引
    success() {
        console.log('红点移除成功');
    },
    fail(err) {
        console.error('红点移除失败', err);
    },
    complete() {
        console.log('移除红点操作结束');
    }
});

步骤六：跳转到 Tab 页面

若要在首页通过某个操作（如点击按钮），跳转到详情 Tab 页面，可使用 tt.switchTab 方法。

说明

tt.switchTab 只能用于跳转到 Tab 页面，若要跳转到非 TabBar 页面，需使用 tt.navigateTo 或 tt.redirectTo。

1. 修改首页

在首页的 index.ttml文件里添加一个用于触发跳转的按钮。

<view class="container">
  <text>这是首页</text>
  <button bindtap="goToDetailTab">跳转到详情页</button>
</view>

2. 实现跳转逻辑

在首页的 index.js 文件里实现 goToDetailTab 事件处理函数，调用 tt.switchTab 进行跳转。

Page({
    data: {
        // 页面数据
    },
    goToDetailTab() {
        tt.switchTab({
            url: '/pages/detail/detail', // 详情页的路径
            success() {
                console.log('成功跳转到详情页');
            },
            fail(err) {
                console.error('跳转失败', err);
            }
        });
    }
});

代码解释：

•

tt.switchTab 方法：专门用于跳转到 Tab 页面，并且会关闭其他非 Tab 页面。

•

url 参数：要跳转的 Tab 页面的路径，需以 / 开头，路径要与 app.json 里配置的页面路径一致，否则会跳转失败。

•

success 回调：当跳转成功时触发，在控制台输出提示信息。

•

fail 回调：若跳转失败，触发此回调并在控制台输出错误信息。

配置完成后，页面变成：

结果验证

你可以在 IDE 的模拟器中预览本教程实现的各个功能，也可以对小程序进行调试，详情请参见 IDE 调试和真机调试。