tabBar（微信小程序）

小程序中tabBar的配置与使用详解,

原创已于 2024-02-27 18:05:41 修改 · 1.3w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端框架

于 2023-06-26 19:32:18 首次发布

文章介绍了tabBar在移动端应用中的作用，特别是在小程序中的常见配置，包括底部和顶部tabBar的区别。tabBar主要由六个部分组成，可以通过app.json配置list，包括pagePath、text、iconPath和selectedIconPath等属性。通过示例展示了如何创建和切换不同页面，以及如何设置选中和未选中状态的图标。

一.概念

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为: 底部 tabBar 顶部 tabBar

注意: tabBar中只能配置最少 2个、最多 5个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本

二.tabBar由6部分组成

tabBar呢是由六部分组成的，分别是：

这里面根据这些属性可以配置

三.tabBar节点的配置项

四.每个 tab 项的配置选项

说了这么多tabBard的配置项，那应该在哪儿写呢？往下看

配置简单tabBar

我们要在在app.json里面填写tabBar

声明节点配置list，最少创建两个tab页签

pagePath把之前做的页面路径写上去

在text里填写tab页签页名

我们来演示下效果

可以看到，我们页面最下面出现了tabBar选项，我们点击之后可以来回切换页面

tabBar图标

我们可以创建一个图片文件夹，在这里放几个选中和未选中时的图片样式

将需要用到的小图标分为 3 组，每组两个，其中：

图片名称中包含 -active 的是选中之后的图标

图片名称中不包含 -active 的是默认图标

新建 3 个对应的 tab 页面通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：


"pages": 
[
 "pages/home/home",

 "pages/message/message",

 "pages/contact/contact"
]

其中，home 是首页，message 是消息页面，contact 是联系我们页面。

在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

pagePath 指定当前 tab 对应的页面路径【必填】

text 指定当前 tab 上按钮的文字【必填】

iconPath 指定当前 tab 未选中时候的图片路径【可选】

selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】


"tabBar": {
"list": [
    {

  "pagePath": "pages/home/home",

  "text": "首页",

  "iconPath": "/images/tabs/home.png",

  "selectedIconPath": "/images/tabs/home-active.png"

},{

  "pagePath": "pages/message/message",

  "text": "消息",

  "iconPath": "/images/tabs/message.png",

  "selectedIconPath": "/images/tabs/message-active.png"

},{

  "pagePath": "pages/contact/contact",

  "text": "联系我们",

  "iconPath": "/images/tabs/contact.png",

  "selectedIconPath": "/images/tabs/contact-active.png"

}]
}

我们写完之后，进行一个效果演示