uniapp中底部tabbar设置

uniapp中底部tabbar设置"/>

uniapp中底部tabbar设置

一、目的：设置底部tabbar

二、设置tabbar

1. 在page.json文件下进行配置

2. tabbar与pages、globalStyle等同级书写

3. color：默认文字颜色

selectedColor：选中的文字颜色

4. list是数组，里面的tabbar至少2个至多5个

5. pagepath：页面的路径

iconPath：默认图标路径

selectedIconPath选中的图标路径

text文字的内容

三、代码展示：

代码：

"tabBar": {"color": "#000000","selectedColor": "D81E06","list": [{"pagePath": "pages/index/index","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/home-active.png","text": "消息"},{"pagePath": "pages/list/list","iconPath": "static/tabbar/cate.png","selectedIconPath": "static/tabbar/cate-active.png","text": "列表"},{"pagePath": "pages/shopCart/shopCart","iconPath": "static/tabbar/cart.png","selectedIconPath": "static/tabbar/cart-active.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "static/tabbar/my.png","selectedIconPath": "static/tabbar/my-active.png","text": "我的"}]
},

四、结果展示：

五、具体配置项分享：

见官网展示：

.html#tabbar