tabBar
如果应用是一个多tab
应用,可以通过tabBar
配置项指定tab栏
的表现,以及tab切换
时显示的对应页。
提示
当设置位置为top
时,将不会显示icon
tabBar
中的list
是一个数组,只能配置最少2个
,最多5个tab
,tab
按数组的顺序排序。
tabbar
切换第一次加载时可能渲染不及时,可以在每个tabbar
页面上加载生命周期里先放置一个等待雪花(hello uni-app
使用了此方式)
tabbar
的页面展现过一次后就保留在内存中,再次切换tabbar
页面,只会触发每个页面的onShow
,不会再触发onLoad
。
顶部的tabbar
目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用tabbar
的顶部设置,否则自己做顶部选项卡,可参考hello uni-app->模板->顶部选项卡
。
参数说明:
color
:导航栏字体颜色
selectedColor
:选中后字体的颜色
backgroundColor
:底部背景颜色
borderStyle
:底部的border颜色,只能是“black
”或者“white
”
list
:对象,包含以下这些选项
{
pagePath:页面路径
text:底部导航文字
iconPath:没选中前的图标路径
selectedIconPath:选中后的图标路径
}
首先
配置tabBar至少两个页面
在pages中
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/class/class",
"style": {
"navigationBarTitleText": "分类"
}
}
],
// 配置tabBar的前提是必须在pages中写上页面 navigationBarTitleText 类似微信小程序中的顶部标题
// tabBar 配置
"tabBar": {
"color": "#7A7E83",
"selectedColor": "red",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/1.png",
"selectedIconPath": "static/11.png",
"text": "首页"
}, {
"pagePath": "pages/class/class",
"iconPath": "static/2.png",
"selectedIconPath": "static/22.png",
"text": "分类"
}]
},
// 默认配置
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
如想修改uniapp顶部导航标题navigationBarTitleText
方式一:
在pages.json
中,pages
配置当前页面下的style==>navigationBarTitleText
即可
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/class/class",
"style": {
"navigationBarTitleText": "分类"
}
}
]
方式二:
在需要修改导航标题的页面生命周期函数
中,使用函数式修改
onLoad() {
uni.setNavigationBarTitle({
title:'首页'
})
}
onShow() {
uni.setNavigationBarTitle({
title:'首页'
})
}
修改背景色后,页面上下,留白问题
因为uniapp的根节点,是page(与小程序一样),所以直接修改page
的背景样式就可以全局修改。