uniapp系列-02底部导航开发

底部效果如图:

pages文件夹新建4个页面

创建页面后自动在pages.json里有代码,如图

uniapp官网找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": "接口"
	}]
}

在static目录下新建tabbar文件夹,把图标资源放在这里,我的是标注1为原始图标,2为选中后图标

在pages.json里对每个页面的图标进行配置地址

按照自己的喜好进行颜色改变,成功的代码如下:

"tabBar": {
			"color": "#7A7E83",
			"selectedColor": "#559659",
			
			"list": [
				{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/index1.png",
				"selectedIconPath": "static/tabbar/index.2.png",
				"text": "首页"
			}, 
			{
				"pagePath": "pages/classify/classify",
				"iconPath": "static/tabbar/classify1.png",
				"selectedIconPath": "static/tabbar/classify2.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/shop/shop",
				"iconPath": "static/tabbar/shopping1.png",
				"selectedIconPath": "static/tabbar/shopping2.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabbar/mine1.png",
				"selectedIconPath": "static/tabbar/mine2.png",
				"text": "我的"
			}
			]
	}

我的图标1是灰色,图标2是绿色,选中就会有一个变色的效果

运行,底部有导航页面即成功