本文介绍: 注释很详细，直接上代码……
注释很详细，直接上代码
新增内容：
1. 标签栏文字的内容以及默认与选中颜色
2. 标签栏图标的默认样式与选中样式
3. 标签选项路径页面
4.标签栏背景颜色
🐼（文末补充）设置标签栏后为什么navigator标签无法跳转页面了
温馨提醒：tabBar只在其对应着的页面生效，其他页面不生效
源码
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
//标签栏有关配置，与页面配置同级
"tabBar": {
//标签栏文字的默认颜色
"color": "#333434",
//被选中的选项的文字的颜色
"selectedColor": "#ff4735",
//标签栏背景颜色
"backgroundColor": "#2fc5c7",
//标签栏列表（至少得两个，也不能太多，否则不好看）
"list": [{
//页面路径
"pagePath": "pages/index/index",
//标签选项的文字
"text": "主页",
//标签选项的默认图标
"iconPath": "/static/tabbar/home-default.png",
//标签选项选中后的图标
"selectedIconPath": "/static/tabbar/home-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/static/tabbar/logs-default.png",
"selectedIconPath": "/static/tabbar/logs-active.png"
}
]
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
效果演示：
素材链接
img-blog.csdnimg.cn/direct/1354819bd03847749fffedcff08db6e9.png
img-blog.csdnimg.cn/direct/f68a173b4b944fb1884a76158d3d7f31.png
“
img-blog.csdnimg.cn/direct/4d150e8361564d7381add8e4bcd4356d.png
img-blog.csdnimg.cn/direct/ecbf5d7d6f1b4524b9f093d7037d3713.png
补充内容
为什么navigator无法跳转标签栏指向的页面了
想象一下，如果
navigator的组件跳转了 而标签栏却没有改变指向的标签选项是不是不太行
解决方法
在navigator组件中添加属性open-type以实现联动
修改前
<navigator url="../logs/logs">
<button type="default">相对路径跳转</button>
</navigator>
修改后
<navigator open-type="switchTab" url="../logs/logs">
<button type="default">相对路径跳转</button>
</navigator>
原文地址:https://blog.csdn.net/m0_73756108/article/details/135567650
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_58138.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
