alter table add column多个字段_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）|tabbar|代码...

　　上一篇文章，我们一起掰扯了全局配置文件-window字段的相关知识，

　　话不多说，今天一起来学习全局配置文件-tabBar字段吧~

　　

　　图片来自于网络，若有侵权联系删除

(一)tabBar字段的定义和功能

　　什么是tabBar字段呢？先来看一下，官方定义：

　　In other words，tabBar字段就是负责创建一个标签页的效果。

　　啥意思涅？？

　　我们打开某宝APP首页，首页下方的底部标签页面，我们使用全局配置文件中的tabBar字段，就是来实现类似某宝底部标签的效果呈现。

　　

(二)认识tabBar字段的属性——list属性

list属性的描述和组成部分

　　回到微信开发者工具界面中，tabBar字段是长介样儿的：

　　的：

　　

　　list属性官方解释如下：：

　　

　　由上图可看到，list属性下包括4部分：

pagePath：页面路径

text：标题

iconPath：未被选中的页面路径

selectedIconPath：已选中的页面图标路径

　　艾瑞巴蒂，我知道，我又在一本正经胡说八道了，

　　

　　好吧~我们还是图文并茂吧~

　　1、pagePath：页面路径

　　还是拿某宝来说吧，pagePath这一行，决定的就是，点击下方菜单栏，要跳转至哪一个页面的路径。

　　

　　2、text：标题

　　如上图所示，某宝中，下方菜单，比如：微淘，消息，购物车等，都是text。

　　3、iconPath：未被选中的页面路径

　　iconPath：点击某宝-购物车后，可以看到下图菜单栏中未选中的页面的状态。

　　

　　4、selectedIconPath：已选中的页面图标路径

　　某宝中，点击“首页”后，下方菜单栏的页面路径：

　　

　　了解完tabBar字段的list属性后，我们可以发现，要想在小程序中建立向某宝页面底部中一样的tabBar栏，b栏，

一要先在全局配置文件中的pages字段中，新建各个子页面；

二是还要用到图标icon，

　　并将图标文件夹复制至开发者工具中建立的小程序项目目录下。

　　并且，icon文件夹与pages、utils文件夹同层级别。如下图所示：

　　

　　这里，本节课，需要用到这8个图标(想要的童鞋，私聊我哦~~)

　　

tabBar字段中的实操——建立小程序底部的tab栏

　　这是实操模板，手把手带你敲代码~~

　　1、pages字段中新增tab栏各个子页面

　　步骤如下：

　　(1)将index页面(首页页面)放在最前面，如下图所示：

　　

　　(2)根据icon文件夹中的后四个图标，编写每个图标的页面路径：

home--首页页面；

img--图片预览页面；

my--个人中心页面；

search--搜索中心页面

　　(3)点击“保存”键，四个页面的代码和呈现结果如下：

　　

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

　　步骤如下：

　　(1)点击下图标识，将window字段折叠:

　　

　　(2)window字段后加入tabBar字段：

　　

　　(3)在tabBar字段中编辑index(首页)页面，代码修改如下：

　　

　　首页页面用到这两个图标，名称一定要写对哦~

　　

　　(4)点击保存，发现调试器下面报错，意为tabBar字段中要同时加入2个页面的路径。

　　

　　(5)在"index"路径后加“，”(如下图中的1)，复制tabBar字段中"index"代码(如下图中的2)

　　

　　(6)将复制的代码修改成img(图片)页面，代码如下：

　　

　　img(图片)页面用到这两个图标，名称一定要对上！

　　

　　(7)按下”保存“键，小程序页面呈现如下。可以看到，”首页“是选中的状态，而图片菜单是未选中的：

　　

　　(8)继续在下方，复制tabBar字段中"index"代码，修改成”个人中心“页面和”搜索中心“页面的代码，如下图：

　　

　　(9)点击保存，看呈现界面的变化:

　　

　　如上图所示，小程序现在的底部菜单栏颜色是很单调的。

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

　　属性哪里找呢？

　　请打开小程序官方指导文档中，定位到tabBar字段的属性介绍页面，如下图：

　　

(三)认识tabBar字段的属性——color属性

　　我们修改菜单栏名称的颜色，这里用到的属性是color，

　　在tabBar字段中，与list同层级，敲入color属性的代码，

　　修改颜色为"#0094ff"(蓝色)：

　　

　　菜单栏的字体颜色，变成蓝色~~

　　

(四)认识tabBar字段的属性——selectedcolor属性

　　修改选中菜单栏页面的字体颜色，我们用到selectedcolor属性：

　　

　　步骤如下：

　　在color属性后，紧接着加入selectedcolor属性，颜色修改成橘黄色”ff9400“。

　　保存，最后如下图，被选中的页面(首页页面)的名称是橘黄色的。

　　

　　敲黑板！！咚咚咚！

　　这里的颜色不能直接写red,yellow等，一定要是十六进制颜色！

　　细心的童鞋，会发现，官方文档中也明确指出：

　　确提到了。

　　

(五)认识tabBar字段的属性——backgroundcolor属性

　　修改选中菜单栏页面的字体颜色，我们用到backgroundcolor属性，

　　在selectedcolor属性后，紧接着加入backgroundcolor属性，

　　颜色修改成红色”ff5433“。

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

　　

(六)认识tabBar字段的属性——position属性

　　改变菜单栏在页面中的位置，我们用到position属性。

　　菜单栏在小程序中是默认在底部的，如果想要菜单栏呈现在顶部，就要用到position属性。

　　如下图所示，position属性仅支持顶部(top)和底部(bottom)两种：

　　

　　与list属性同层级，加入position属性，代码如下。图。

　　将菜单栏设置为在页面的顶部，而且，大家也可以发现，当菜单栏跑到顶部后，各个页面的图标都消失了。

　　这是小程序的规定，大家指导就好了~~

　　

　　tabBar字段中还有一些本章未讲到的属性，大家课下自行实践哈~~

　　最后，我们再来总结一下，这章的内容：

(一)tabBar字段的定义和功能

(二)认识tabBar字段的属性——list属性

list属性的描述和组成部分

tabBar字段中的实操——建立小程序底部的tab栏

(三)认识tabBar字段的属性——color属性

(四)认识tabBar字段的属性——selectedcolor属性

(五)认识tabBar字段的属性——backgroundcolor属性

(六)认识tabBar字段的属性——position属性

　　最后的最后，欢迎大家看完后给提点意见~

　　如果觉得有帮助，希望得到一枚小小的赞~