小程序入门连载五之小程序配置—tabBar

上一篇文章说明了小程序配置 — window，本篇文章说明小程序配置 — tabBar。

tabBar

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

tabBar配置项下的属性：

1. list——tab列表

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

为tabBar配置项添加list属性，注意tab列表最少2个，最多5个tab。

1）图片

在list中需要按钮的图片，在小程序中图片直接放在与app.json文件同级即可。

images文件夹下图片信息：

注意：

小程序最后上线是上传到微信服务器上的，微信不允许上传大文件，例如视频等，因此在小程序中使用的视频、大图片等都是自己服务器上的。

2）创建tabBar配置项与list属性

编译预览：

2. color——tab上文字默认颜色

设置默认颜色为黑色——#000。

tabBar配置项设置：

编译预览：

3. selectedColor——tab上的文字选中时的颜色

设置文字选中颜色为绿色——#1AAD19。

编译预览：

4. backgroundColor——tab背景色

设置tab背景色为深灰色——#ddd。

编译预览：

5. borderStyle——tabBar上边框颜色

borderStyle属性的值为black或white。

如果看的不明显，可以分别设置一下，进行对比。

编译预览：

6. position——tabBar位置

position值为top或bottom，默认为bottom。

编译预览：

注意：

1. 当设置position为top时，将不会显示icon。

2. tabBar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。

tabBar配置项图解：

小程序开发入门连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇文章讲解“小程序配置——debug+页面配置”