微信小程序tabBar的基本设置-微信小程序tabbar字体大小-微信小程序tabbar高度-即速应用

微信小程序tabBar的基本设置-微信小程序tabbar字体大小-微信小程序tabbar高度

浏览量：17952 时间：2020-04-06 来源：LPLIFE

1.
app.json
2.
当我们想要在小程序中实现下面的效果的时候，可以使用tabBar
3.
从图片中可以看到tab的结构：
4.
1、3个可选的tab：
5.
list:使用tabBar对象中的list对象数组属性来控制，list数组中的每个元素（对象）,
{"pages":["pages/index/index","pages/publish/index","pages/user/index"],"tabBar":{"color":"#dddddd","selectedColor":"#16f2e7","backgroundColor":"#fff","borderStyle":"black","list":[{"pagePath":"pages/index/index","text":"找房","iconPath":"static/image/icon_home_u.png","selectedIconPath":"static/image/icon_home_a.png"},{"pagePath":"pages/publish/index","text":"发布房源","iconPath":"static/image/icon_release_u.png","selectedIconPath":"static/image/icon_release_a.png"},{"pagePath":"pages/user/index","text":"我的","selectedIconPath":"static/image/icon_user_a.png","iconPath":"static/image/icon_user_u.png"}]},"component":true,"usingComponents":{}}6.
2.选项底部文案：
7.
text：可以用来描述选项卡文案
8.
3、当选中的时候icon动态发生变化：
9.
iconPath：未选中时默认的icon图片路径，icon大小限制为40kb，建议尺寸为81px*81px
10.
selectedIconPat：选中后更换的icon图片路径，icon大小限制为40kb，建议尺寸为81px*81px
11.
4、字体选中、未选中的时候动态变化：
12.
color：默认的tab字体颜色
13.
selectedColor：选中后的字体颜色
14.
5、选中不同的tab切换不同的页面：
15.
pagePath：页面路径
16.
6.tabBar上边框的颜色：
17.
borderStyle：仅支持black、white，默认black
18.
7.tabBar背景颜色：backgroundColor
19.
color、selectedColor、backgroundColor：仅支持16六进制的颜色表示方法，如（#ffffff）