UniApp设置tabBar,解决界面不显示的问题

2,076 阅读1分钟

问题:UniApp设置tabBar,解决界面不显示,

根据官方文档,在 pages.json 中提供 tabBar 配置,

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

界面没显示,检查了代码,pages第一个选项和我的tabBar第一个的选项是同一个页面,但是没显示,不是这个问题。

解决方法:

一:pagePath不能是相对路径,必须是pages里的path保持一致

是自己写的tabBar的pagePath写了绝对路径,改正之后,能显示了

"list": [
			{
				"pagePath": "pages/home/index",
				"iconPath": "./images/home-off.png",
				"selectedIconPath": "./images/home-on.png",
				"text": "首页"
			},
			{
				"iconPath": "./images/ic_catefory_normal.png",
				"pagePath": "pages/category/index",
				"text": "分类",
				"selectedIconPath": "./images/ic_catefory_pressed.png"
			},
       ]

image.png