微信小程序全局配置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" }

• « 上一篇：2022年春晚——【相信爱情】【继续生娃】
• » 下一篇：Java NIO为何导致堆外内存OOM了？