tabBar（微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了tabBar（微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.概念

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

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

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

微信小程序tabbar,微信小程序,前端框架

二.tabBar由6部分组成

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

微信小程序tabbar,微信小程序,前端框架

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

三.tabBar节点的配置项

微信小程序tabbar,微信小程序,前端框架

四.每个 tab 项的配置选项

微信小程序tabbar,微信小程序,前端框架

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

配置简单tabBar

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

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

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

在text里填写tab页签页名

微信小程序tabbar,微信小程序,前端框架我们来演示下效果

微信小程序tabbar,微信小程序,前端框架

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

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"

}]
}

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

微信小程序tabbar,微信小程序,前端框架