写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1

1 tabbar简介

放张图片大家就知道这是个什么东西了，下图中，红色框选的部分

2 tabbar使用

2.1 将icon图片放进static目录下

2.2 创建tabbar组件

举个栗子：

我创建了5个组件，分别是：

• pages/home/index.vue，对应的是首页组件页面
• pages/horizontal/index.vue，对应的是横屏组件页面
• pages/mine/index.vue，对应的是我的组件页面
• pages/search/index.vue，对应的是搜素组件页面
• pages/video/index.vue，对应的是精美视频组件页面

2.3 在pages.json中进行配置

{
	"pages": [
		{
			"path": "pages/home/index",
			"style": {
				"navigationBarTitleText": "home"
			}
		},{
			"path": "pages/horizontal/index",
			"style": {
				"navigationBarTitleText": "horizontal"
			}
		},{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "mine"
			}
		},{
			"path": "pages/search/index",
			"style": {
				"navigationBarTitleText": "search"
			}
		},
		{
			"path": "pages/video/index",
			"style": {
				"navigationBarTitleText": "video"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#8a8a8a",
		"selectedColor": "#d4237a",
		"backgroundColor": "#fff",
		"position": "bottom",
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/home/index",
				"text": "首页",
				"iconPath": "./static/icon/_home.png",
				"selectedIconPath": "./static/icon/home.png"
			},
			{
				"pagePath": "pages/horizontal/index",
				"text": "横屏",
				"iconPath": "./static/icon/_img.png",
				"selectedIconPath": "./static/icon/img.png"
			},
			{
				"pagePath": "pages/video/index",
				"text": "精美视频",
				"iconPath": "./static/icon/_videocamera.png",
				"selectedIconPath": "./static/icon/videocamera.png"
			},
			{
				"pagePath": "pages/search/index",
				"text": "搜索",
				"iconPath": "./static/icon/_search.png",
				"selectedIconPath": "./static/icon/search.png"
			},
			{
				"pagePath": "pages/mine/index",
				"text": "我的",
				"iconPath": "./static/icon/_my.png",
				"selectedIconPath": "./static/icon/my.png"
			}
		]
	}
}