uniapp实现底部导航栏_如何设置pages.json让uniapp底部导航栏有动画

首先在pages.json中找到"globalStyle"，在它下面建立"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": "接口"
	}]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其中pagePath是页面路径，iconPath是页面图标路径，selectedIconPath是页面选中后的图标路径，text是页面名称，

示例：

"tabBar": {
	"borderStyle": "black",
	"selectedColor": "#FB7299",
	"color": "#444444",
	"list": [
		{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar/首页.png",
			/* "selectedIconPath": "static/tabbar/", */
			"text": "主页"
		},{
			"pagePath": "pages/cate/cate",
			"iconPath": "static/tabbar/收藏.png",
			/*"selectedIconPath": "static/tabbar/", */
			"text": "关注"
		},{
			"pagePath": "pages/mine/mine",
			"iconPath": "static/tabbar/部群归属.png",
			/*"selectedIconPath": "static/tabbar/", */
			"text": "我的"
		}
	]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果：

接下来就可以实现各个页面的功能了。