App下载
5. 全局配置-下
微信小程序入门课程 / 5. 全局配置-下
手机也能上课
App下载
1/4

app.json-tabBar

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

 Tip:当设置 position 为 top 时,将不会显示 icon。tabBar 中的 list 是一个数组,只能配置最少2个,最多5个 tab。tab 按数组的顺序排序。

属性说明: 

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、top

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下: 

属性类型必填说明
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

执行结果:


+10 经验 +10积分
解析
提示
参考答案
+10 经验 +10积分
视频播放结束,是否学习下一节?