【uniapp学习之二】 底部导航_uniapp底部导航栏

一、新建tabbar目录

新建tabbar目录。将index手动移动到tabbar目录下，同时新建页面home和mine。

【注】HBuildex 运行-------》微信开发者工具，右击新建页面后，在pages.json中自动生成相关的配置。

二、pages.json中配置tabBar

	"tabBar":{//底部样式
		"color":"#999",
		"selectedColor":"#00b783",
		"borderStyle":"white",
		"backgroundColor":"white",
		"list":[{
			"pagePath":"pages/tabbar/index/index",
			"text":"首页",
			"iconPath":"static/user_img1.png",
			"selectedIconPath":"static/user_img2.png"
		},{
			"pagePath":"pages/tabbar/home/home",
			"text":"Home",
			"iconPath":"static/user_img4.png",
			"selectedIconPath":"static/user_img5.png"
		},{
			"pagePath":"pages/tabbar/mine/mine",
			"text":"mine",
			"iconPath":"static/user_img3.png",
			"selectedIconPath":"static/user_img6.png"
		}]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三、效果图