写点什么

【愚公系列】2022 年 11 月 微信小程序 -app.json 配置属性之 tabBar

作者:愚公搬代码
  • 2022-11-10
    福建
  • 本文字数:638 字

    阅读完需:约 2 分钟

一、app.json 配置属性之 tabBar

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性 |类型 | 必填 |默认值 | 描述 | 最低版本

-------- | -----| -----| -----| -----| -----

color |HexColor |是 ||tab 上的文字默认颜色,仅支持十六进制颜色

selectedColor |HexColor |是 | |tab 上的文字选中时的颜色,仅支持十六进制颜色

backgroundColor |HexColor |是 | |tab 的背景色,仅支持十六进制颜色

borderStyle |string |否 |black |tabbar |上边框的颜色, 仅支持 black / white

list |Array | 是 | | tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

position |string | 否 | bottom | tabBar 的位置,仅支持 bottom / top

custom |boolean | 否 |false |自定义 tabBar,见详情 | 2.5.0

二、 list

list 是 tabBar 下一个属性,功能主要是导航栏列表


list 的属性有:


三、tabBar 配置案例

"tabBar": {  "list": [    {      "pagePath": "pages/index/index",      "text": "首页"    },    {      "pagePath": "pages/getOpenId/index",      "text": "看资讯"    },    {      "pagePath": "pages/getMiniProgramCode/index",      "text": "我的"    }  ],  "backgroundColor": "#fff",  "color": "#000",  "selectedColor": "#0286f1"},
复制代码


  1. backgroundColor

  2. selectedIconPath

  3. selectedColor

  4. borderStyle

  5. iconPath

  6. color



发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2022-03-01 加入

该博客包括:.NET、Java、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、python、大数据等相关使用及进阶知识。查看博客过程中,如有任何问题,皆可随时沟通。

评论

发布
暂无评论
【愚公系列】2022年11月 微信小程序-app.json配置属性之tabBar_11月月更_愚公搬代码_InfoQ写作社区