uniapp tabbar

emoji111111

已于 2024-02-21 13:27:01 修改

阅读量362

点赞数 8

文章标签： uni-app 前端

于 2024-02-21 13:23:21 首次发布

本文链接：https://blog.csdn.net/emoji111111/article/details/136209208

版权

效果图

首先在pages文件夹下新建对应的三个文件

在pages.json文件下添加以下代码，和pages数组同级别

"tabBar": {
		"list": [{
				"pagePath": "pages/dashboard/index",  //对应的路径
				"iconPath": "static/images/index-glary.png", //未选中时的icon
				"selectedIconPath": "static/images/index-glod.png", //选中时的icon
				"text": "首页" 
			},
			{
				"pagePath": "pages/developing/index",
				"iconPath": "static/images/index-lock.png",
				"selectedIconPath": "static/images/logout-default-avatar.png",
				"text": "待开发"
			},
			{
				"pagePath": "pages/mine/index",
				"iconPath": "static/images/sel-exercise.png",
				"selectedIconPath": "static/images/radio-done.png",
				"text": "我的"
			}
		]
	},

这三个路径，要在pages数组下，新建一下，要不会报错

	"pages": [
		{
			"path": "pages/dashboard/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/developing/index",
			"style": {
				"navigationBarTitleText": "待开发"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

保存运行就可以了

pages.json完整内容：

{
	"pages": [
		{
			"path": "pages/dashboard/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/developing/index",
			"style": {
				"navigationBarTitleText": "待开发"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"

	},
	"tabBar": {
		"list": [{
				"pagePath": "pages/dashboard/index",  //对应的路径
				"iconPath": "static/images/index-glary.png", //未选中时的icon
				"selectedIconPath": "static/images/index-glod.png", //选中时的icon
				"text": "首页" 
			},
			{
				"pagePath": "pages/developing/index",
				"iconPath": "static/images/index-lock.png",
				"selectedIconPath": "static/images/logout-default-avatar.png",
				"text": "待开发"
			},
			{
				"pagePath": "pages/mine/index",
				"iconPath": "static/images/sel-exercise.png",
				"selectedIconPath": "static/images/radio-done.png",
				"text": "我的"
			}
		]
	},
	"uniIdRouter": {}
}