本系列为简单入门系列,以一定概括性思路来叙述内容,具体可以查看官网
大部分的电商
应用都是底部或顶部多 tab 的模式
. 下面我们从配置角度来分析一下:
第一个:position
配置如下:
默认是 bottom,也可以设置 top 来改变 tabBar 的位置
第二个:list
配置如下:
必须的参数:
- text 文字,如果是 position 为 bottom,会出现在 icon 的下面
- pagePath 跳转的路径
可选参数:如果 position 设置了 top,就不会显示
- iconPath 默认 icon 的路径
- selectedIconPath 选中 icon 的路径
这 2 个多不支持网络图片
,尺寸建议是 81*81
但是请注意:
1、最少 2 个,不然会报错:
tabBar.list 需至少包含 2 项
2、最多 5 个,
tabBar.list 不能超过 5 项
3、里面的 pagePath 不能为空,而且需要在 pages 数组定义
第三个:设置 text 文字的颜色
- color 默认的文字颜色
- selectedColor 选中的文字颜色
第四个:tabBar 的背景和边框
- borderStyle 边框的颜色,默认 black,支持 white 和 black 两种
- backgroudColor 背景颜色