微信小程序全局配置tabBar

微信小程序全局配置tabBar

什么是tabBar?

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

  • 底部 tabBar
  • 顶部 tabBar

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

tabBar 节点的配置项

微信小程序全局配置tabBar_第1张图片

每个 tab 项的配置选项

微信小程序全局配置tabBar_第2张图片

实现案例

实现效果

实现了三个页面之间的互相切换,和tabBar之间图标选中效果之间的切换。
微信小程序全局配置tabBar_第3张图片
微信小程序全局配置tabBar_第4张图片
微信小程序全局配置tabBar_第5张图片

全局配置

目录结构如下
微信小程序全局配置tabBar_第6张图片
整个案例的页面配置项如下

"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"
  
 
}

你可能感兴趣的:(移动端开发,微信小程序,小程序)