uniapp如何配置底部tabBar

最新推荐文章于 2025-10-08 00:10:38 发布

原创最新推荐文章于 2025-10-08 00:10:38 发布 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp

本文详细介绍了uni-app中tabBar的配置方法及注意事项，包括如何配置至少两个页面、设置导航栏颜色、选中状态颜色等，并提供了修改顶部导航标题的方法。

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的背景样式就可以全局修改。