微信小程序全局配置tabBar

微信小程序全局配置tabBar

什么是tabBar？

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

• 底部 tabBar
• 顶部 tabBar

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

tabBar 节点的配置项

每个 tab 项的配置选项

实现案例

实现效果

实现了三个页面之间的互相切换，和tabBar之间图标选中效果之间的切换。

全局配置

目录结构如下

整个案例的页面配置项如下

"pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/message/message",
    "pages/logs/logs"
  ],

之后我们只需要在全局配置中完成tabBar的配置，即可完成页面之间切换的效果。

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/list/list",
      "text": "列表",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    }
  ]
  },

全局配置文件

{
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/message/message",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#eee",
    "navigationBarTitleText": "小旭",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/list/list",
      "text": "列表",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
  
 
}