字段中新增四个页面的代码和呈现结果，属性哪里找呢？

my--个人中心页面；

--搜索中心页面

(3) 单击“保存”按钮

四个页面的代码及渲染结果如下：

2. 字段中新增四个子菜单栏

请按如下方式进行：

(1) 单击下面的图标折叠字段

(2)在字段后面添加字段

(3)编辑字段中的索引(主页)页面，修改代码如下：

这两个图标用在首页上，名字一定要写对哦~

（4）点击保存，发现调试器下方有错误，说明需要同时将两个页面的路径添加到字段中。

（5）在“index”路径后添加“,”（下图1），并复制字段中的“index”代码（下图2）

（6）将复制的代码修改为img（图片）页面，代码如下

img（图片）页面使用这两个图标，并且名称必须匹配！

(7) 点击“保存”按钮，出现小程序页面如下。可以看到“首页”被选中，但图片菜单未被选中。

（8）继续下面，复制字段中的“索引”代码，修改为“个人中心”页面和“搜索中心”页面的代码，如下图：

(9)点击保存即可看到演示界面的变化

如上图所示，目前小程序的底部菜单栏颜色非常单调。

我们可以在字段中应用其他颜色属性来调整颜色。

在哪里可以找到属性？

请点击以下链接跳转至小程序官方指导文档。

导航至该字段的属性介绍页面，如下图

(3)了解字段的属性——颜色属性

我们修改菜单栏名称的颜色。 这里使用的属性是颜色。

在与列表同一级别的字段中，输入颜色属性的代码并将颜色更改为“#”（蓝色）

菜单栏字体颜色变为蓝色~~

(4)了解字段的属性——颜色属性

要修改所选菜单栏页面的字体颜色，我们使用 color 属性

请按如下方式进行：

在颜色属性之后，立即添加颜色属性，

将颜色改为橙色“”，保存，最后如下图，

所选页面（主页）的名称为橙色

敲黑板！ ！ 繁荣，繁荣，繁荣！

这里的颜色不能直接写成红色等。

它必须是十六进制颜色！

细心的童鞋会发现，

官方文档中也明确提到了这一点。

(5)了解字段的属性——颜色属性

要修改所选菜单栏页面的字体颜色，我们使用 color 属性，

在颜色属性之后，立即添加颜色属性，

将颜色改为红色“”，保存，最后如下图，菜单栏的背景色变成红色。

(6)了解字段的属性——属性

要更改菜单栏在页面上的位置，我们使用属性，

小程序默认菜单栏位于底部。

如果你想让菜单栏出现在顶部，你需要使用该属性，

如下图所示，该属性只支持top（顶部）和（）。

在与列表属性相同的级别上，添加该属性。 代码如下所示。 将菜单栏设置在页面顶部。

此外，你还可以发现，

当菜单栏到达顶部时，每个页面上的图标都会消失。 这是小程序的一个规则。 如果大家都知道就好了~~

该字段中有一些属性在本章中没有提到。 课后可以练习哦~~

最后我们来总结一下本章的内容

(1) 字段定义及作用

(2)了解字段的属性——列表属性

· 列表属性的描述和组成

· 实战操作——创建小程序底部标签栏

(3)了解字段的属性——颜色属性

(4)了解字段的属性——颜色属性

(5)了解字段的属性——颜色属性

(6)了解字段的属性——属性

TAG标签：微信小程序tabbar