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

技术
今日推荐
阅读数 395
阅读数 124
阅读数 113
阅读数 86
阅读数 69
阅读数 47
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信