使用uniapp开发小程序时,需要实现一个底部菜单按钮,我们需要在pages.json这个文件里进行配置。
默认的pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
我需要在uniapp配置四个按钮首页 预约 订单 我的
完成后的配置
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
{
"tabBar": {
"color": "#767676",
"selectedColor": "#1A1A1A",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"
},
{
"pagePath": "pages/appointment/appointment",
"text": "预约",
"iconPath": "static/tabs/appointment.png",
"selectedIconPath": "static/tabs/appointment-active.png"
},
{
"pagePath": "pages/order/order",
"text": "订单",
"iconPath": "static/tabs/order.png",
"selectedIconPath": "static/tabs/order-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/tabs/mine.png",
"selectedIconPath": "static/tabs/mine-active.png"
}
]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}