小程序tabbar能放分包路径吗_微信小程序配置—tabBar（小程序自带）

上一篇文章说明了小程序页面跳转，本篇文章说明小程序配置 — tabBar。

先看下小程序自带的tabBar功能。

显示效果如图：

(在顶部)顶部topBar

(在底部)底部topBar

tabBar

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

tabBar配置项下的属性：

1. list——tab列表

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

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

代码示例：

"tabBar": {

"color": "#aaaaaa", //文字颜色

"selectedColor": "#2E87E4", //文字选中的颜色

"backgroundColor": "#ddd", //tab背景色

"borderStyle": "black", //tabBar上边框颜色

"position": "top", //tabBar位置顶部top或底部bottom

"list": [

{

"selectedIconPath": "images/near_store_selected.png", //选中图标

"iconPath": "images/near_store.png", //默认图标

"pagePath": "pages/index/index", //链接，无需加文件后缀(必填)

"text": "附近店面" //文字(必填)

},

{

"selectedIconPath": "images/collect_selected.png",

"iconPath": "images/collect.png",

"pagePath": "pages/collectStores/collectStores",

"text": "店面收集"

},

{

"selectedIconPath": "images/mystore_select.png",

"iconPath": "images/mystore.png",

"pagePath": "pages/menu/menu",

"text": "我的"

}

]

},

1)图片

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

注意：

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

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

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

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

4. backgroundColor——tab背景色

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

5. borderStyle——tabBar上边框颜色

borderStyle属性的值为black或white。

6. position——tabBar位置

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

(完)