©2020-2024 ioDraw All rights reserved
<> Wechat applet global configuration tabBar
<> What is? tabBar?
tabBar It is a common page effect in mobile applications , For fast switching of multiple pages . Applets are usually divided into ：
* bottom tabBar
* Top tabBar
be careful ：
tabBar You can only configure at least 2 individual , most 5 individual tab Tab
When rendering top tabBar Hour , Do not show icon, Show text only
<>tabBar Configuration item of node
<> each tab Configuration options for items
<> Implementation case
<> Achieve results
Realize the mutual switching between the three pages , and tabBar Switch between icon selection effects .
<> Global configuration
The directory structure is as follows
The page configuration items of the whole case are as follows
"pages": [ "pages/index/index", "pages/list/list", "pages/message/message",
"pages/logs/logs" ],
After that, we only need to complete it in the global configuration tabBar Configuration of , You can complete the effect of switching between pages .
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": " home page ",
"iconPath": "/images/home.png", "selectedIconPath": "/images/home-active.png" },
{ "pagePath": "pages/list/list", "text": " list ", "iconPath": "/images/contact.png"
, "selectedIconPath": "/images/contact-active.png" },{ "pagePath":
"pages/message/message", "text": " news ", "iconPath": "/images/message.png",
"selectedIconPath": "/images/message-active.png" } ] },
Global profile
{ "pages": [ "pages/index/index", "pages/list/list", "pages/message/message",
"pages/logs/logs" ], "window": { "backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#eee", "navigationBarTitleText": " Xiaoxu ",
"navigationBarTextStyle": "black", "enablePullDownRefresh": true,
"backgroundColor": "#efefef" }, "tabBar": { "list": [ { "pagePath":
"pages/index/index", "text": " home page ", "iconPath": "/images/home.png",
"selectedIconPath": "/images/home-active.png" },{ "pagePath": "pages/list/list",
"text": " list ", "iconPath": "/images/contact.png", "selectedIconPath":
"/images/contact-active.png" },{ "pagePath": "pages/message/message", "text":
" news ", "iconPath": "/images/message.png", "selectedIconPath":
"/images/message-active.png" } ] }, "style": "v2", "sitemapLocation":
"sitemap.json", "lazyCodeLoading": "requiredComponents" }
Technology