uniapp 创建底部tabBar菜单

曹え 5811 发布于:2024-01-25 07:15:07

底部菜单配置和小程序基本一样,在pagas.json 中添加如下配置,

文档地址:https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

"tabBar": {
		"color": "#666666", // 文字颜色
		"selectedColor": "#000000", // 选中时候的文字颜色
		"borderStyle": "black", // 边框样式
		"backgroundColor": "#ffffff", // 背景色
		"list": [{
				"pagePath": "pages/index/index", // 页面路径
				"iconPath": "/static/images/icon/tabbar/t1.png", // 默认图标图片
				"selectedIconPath": "/static/images/icon/tabbar/t1a.png", // 选中时候的图标图片
				"text": "首页" // 文本
			},
			{
				"pagePath": "pages/collect/collect",
				"iconPath": "/static/images/icon/tabbar/t2.png",
				"selectedIconPath": "/static/images/icon/tabbar/t2a.png",
				"text": "收藏"
			},
			{
				"pagePath": "pages/cart/cart",
				"iconPath": "/static/images/icon/tabbar/t3.png",
				"selectedIconPath": "/static/images/icon/tabbar/t3a.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "/static/images/icon/tabbar/t4.png",
				"selectedIconPath": "/static/images/icon/tabbar/t4a.png",
				"text": "我的"
			}
		]
	},


觉得有用请点个赞吧!
0 617