二、【底部】导航开发
1.1完成效果图:
1.2 在项目目录中pages.json中进行配置,代码如下:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "百年奥莱",
"navigationBarBackgroundColor":"#ffffff"
}
}
,{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/shopcart/shopcart",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/indx.png",
"selectedIconPath": "static/tabbar/indexSelected.png",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"iconPath": "static/tabbar/list.png",
"selectedIconPath": "static/tabbar/listSelected.png",
"text": "分类"
},
{
"pagePath": "pages/shopcart/shopcart",
"iconPath": "static/tabbar/shop.png",
"selectedIconPath": "static/tabbar/shopSelected.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/mySelected.png",
"text": "我的"
}
]
}
}
1.3 参考官方网址:https://uniapp.dcloud.io/collocation/pages?id=tabbar
标签:navigationBarTitleText,list,开发,static,底部,tabbar,导航,pages,png From: https://www.cnblogs.com/liu88/p/17034920.html