uni-app学习02 底部选项卡

项目搭建

images

可以从阿里巴巴矢量图标库中下载所需图标https://www.iconfont.cn/help/detail?helptype=about
下载后将图片放入images文件夹中。

在pages.json文件中配置图标：

```css
```css
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/home/home",
				"text": "首页",
				// iconPath为未被选择的普通状态，selectedIconPath为被选择的高亮状态
				"iconPath": "static/images/tabBar/shouye5.png",
				"selectedIconPath": "static/images/tabBar/shouye6.png"
				
			},
			{
				"pagePath": "pages/chat/chat",
				"text": "消息",
				"iconPath": "static/images/tabBar/liaotianduihua-xianxing.png",
				"selectedIconPath": "static/images/tabBar/liaotianduihua.png"
			},
			{
				"pagePath": "pages/shoppingCart/shoppingCart",
				"text": "购物车",
				"iconPath": "static/images/tabBar/gouwuche.png",
				"selectedIconPath": "static/images/tabBar/gouwuchefill.png"
			},
			{
				"pagePath": "pages/aboutMe/aboutMe",
				"text": "个人中心",
				"iconPath": "static/images/tabBar/wo_weijihuo.png",
				"selectedIconPath": "static/images/tabBar/wo_jihuo.png"
			}
		]
	}

实现效果，下方出现图标

点击切换界面，首页图标切换为未激活，选中的图标切换为激活