自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景,详细的可以参考微信官方文档tabBar
地址
使用流程:
自定义tabBar必须要有2个tab
1.先把自己的菜单栏图片添加到项目中
2.使用tabBar要在全局的app.json中使用
2.1:利用全局app.json创建几个tab 页面
"pages/index/index",
"pages/cart/cart",
"pages/category/category",
"pages/my/my"
2.2:在app.json中使用tabBar
命令解读:
pagePath:图二的所创建的tab页面
text:文本
iconPtian:你所导入项目的图标地址
selectedIconPath:选中后的图标地址
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/icons/home.png",
"selectedIconPath": "/icons/home-0.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/icons/cart.png",
"selectedIconPath": "/icons/cart-0.png"
},
{
"pagePath": "pages/category/category",
"text": "菜单栏",
"iconPath": "/icons/category.png",
"selectedIconPath": "/icons/category-0.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/icons/my.png",
"selectedIconPath": "/icons/my-0.png"
}
]}
如果想要在默认启动页用tabBar,可以把pagePath设置成app.json-->pages数组中的第一个就可以了。
效果图: