卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >小程序连载

「小程序入门连载五」小程序配置—tabBar
时间: 2018-11-08 16:12:55     来源: 卓象IT实训基地【原创】

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


tabBar

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

tabBar配置项下的属性:

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



1. list——tab列表

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

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


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

1)图片

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

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


images文件夹下图片信息:

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


注意:

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

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

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


编译预览:

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



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

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

tabBar配置项设置:

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


编译预览:

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



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

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

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


编译预览:

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



4. backgroundColor——tab背景色

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

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


编译预览:

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



5. borderStyle——tabBar上边框颜色

borderStyle属性的值为black或white。

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

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


编译预览:

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



6. position——tabBar位置

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

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


编译预览:

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


注意:

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

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


tabBar配置项图解:

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


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


文章篇幅过长,分多篇文章进行说明

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

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

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