首页 > 编程语言 >#yyds干货盘点#【愚公系列】2022年02月 微信小程序-全局配置属性之tabBar

#yyds干货盘点#【愚公系列】2022年02月 微信小程序-全局配置属性之tabBar

时间:2022-10-12 21:33:27浏览次数:57  
标签:yyds string tabBar 微信 list tab text 属性

一、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的属性有:

属性 类型 必填 说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。

三、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

在这里插入图片描述

标签:yyds,string,tabBar,微信,list,tab,text,属性
From: https://blog.51cto.com/u_15437432/5751602

相关文章