uniapp 底部导航栏 tabBar

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

源素材如下:




在 pages.json 中添加

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": "我的"
			}
		]
	},

预览效果如下

相关推荐
Aress"2 小时前
【ios越狱包安装失败?uniapp导出ipa文件如何安装到苹果手机】苹果IOS直接安装IPA文件
ios·uni-app·ipa安装
爱宇阳2 小时前
UniApp 在华为三折叠屏中的适配问题与最佳解决方案(rpx 实战指南)
uni-app
山河故人1632 小时前
uniapp使用npm下载
前端·npm·uni-app
于慨9 小时前
uniapp+vite+cli模板引入tailwindcss
前端·uni-app
lqj_本人14 小时前
鸿蒙OS&UniApp 制作简洁高效的标签云组件#三方框架 #Uniapp
uni-app
不爱吃饭爱吃菜14 小时前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别
前端 贾公子15 小时前
uniapp -- 验证码倒计时按钮组件
前端·vue.js·uni-app
weixin_545019321 天前
微信小程序智能商城系统(uniapp+Springboot后端+vue管理端)
spring boot·微信小程序·uni-app
lqj_本人1 天前
鸿蒙OS&UniApp 实现的语音输入与语音识别功能#三方框架 #Uniapp
uni-app
lqj_本人1 天前
鸿蒙OS&UniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp
uni-app·harmonyos