©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>微信小程序全局配置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" }