uniapp 底部导航栏 tabBar

2023-12-28 19:41:48

在 static 文件夹中新建文件夹 tabBar，放入标签图片

在这里插入图片描述
源素材如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在 pages.json 中添加

	// 底部导航
	"tabBar": {
		// tab默认文字颜色
		"color": "#bfbfbf",
		// tab选中后的文字颜色
		"selectedColor": "#153c65",
		// 底栏列表
		"list": [{
				// tab默认图标路径
				"iconPath": "static/tabBar/tabBar_index_default.png",
				// tab选中后的图标路径
				"selectedIconPath": "static/tabBar/tabBar_index_selected.png",
				// tab跳转的页面路径
				"pagePath": "pages/index/index",
				// tab文字
				"text": "首页"
			},
			{
				"iconPath": "static/tabBar/tabBar_me_default.png",
				"selectedIconPath": "static/tabBar/tabBar_me_selected.png",
				"pagePath": "pages/me/me",
				"text": "我的"
			}
		]
	},

预览效果如下

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_41192489/article/details/135276297
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。