注:前言、目录见 https://god-excious.blog.csdn.net/article/details/105312456
文章目录
【013】底部导航开发
官方文档 https://uniapp.dcloud.io/collocation/pages?id=tabbar
具体在pages.json文件中的tabBar里设置
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/demo/demo",
"style" : {}
}
,{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "仿糗事百科"
}
}
,{
"path" : "pages/ceshi/ceshi",
"style" : {}
}
,{
"path" : "pages/news/news",
"style" : {}
}
,{
"path" : "pages/paper/paper",
"style" : {}
}
,{
"path" : "pages/home/home",
"style" : {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "仿糗事百科",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color":"#adadad", // 导航栏文字默认颜色
"selectedColor":"#fee42a", // 导航栏选中颜色
"backgroundColor":"#fff", // 导航栏背景颜色
"borderStyle":"white", // 导航栏边框样式
"list":[ // tab的列表
{
"pagePath":"pages/index/index", // 导航栏对应页面路径(不用写.vue)
"text":"糗事", // 导航栏文字
"iconPath":"static/tabbar/index.png", // 导航栏未选中的图标路径
"selectedIconPath":"static/tabbar/indexed.png" // 导航栏已选中的图标路径
},
{
"pagePath":"pages/news/news",
"text":"动态",
"iconPath":"static/tabbar/news.png",
"selectedIconPath":"static/tabbar/newsed.png"
},
{
"pagePath":"pages/paper/paper",
"text":"小纸条",
"iconPath":"static/tabbar/paper.png",
"selectedIconPath":"static/tabbar/papered.png"
},
{
"pagePath":"pages/home/home",
"text":"我的",
"iconPath":"static/tabbar/home.png",
"selectedIconPath":"static/tabbar/homed.png"
}
]
}
}