小程序入门连载五之小程序配置—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+页面配置”

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180714A0G66500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券