小程序入门系列之 tabBar

本系列为简单入门系列，以一定概括性思路来叙述内容，具体可以查看官网

---

大部分的电商应用都是底部或顶部多 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 背景颜色