First, open the uniapp official website, find the official tarbar document, read it carefully, the specific location is as follows, find the tabBar in the pages.json page route under the global configuration, click to view:

Pay attention to these two sentences:

After finding the document, we can follow the above tips to write code!

First we need to use HBuilder X to create a project, then find the corresponding location and start writing code

📌Step 1: Create a tabbar folder under the pages folder, which stores the corresponding tabbar navigation pages, and then create tabs according to individual needs, with a minimum of 2 and a maximum of 5, as shown in the figure, here I created 4, a .vue file is created under each folder to write page code

📌Step 2: Find the pages.json file, and write the tabbar configuration code at the same level as "pages". There are sample code references and attribute descriptions in the official document

Created 4 tab s, so I need to configure 4 here, the code is as follows:

	"tabBar": {
		// text unselected color
		"color": "#999",
		// selected color
		"selectedColor": "#00b783",
		// border color
		"borderStyle": "#fff",
		// background color
		"backgroundColor": "#fff",
		// Configure the tab page
		"list": [{
			// Corresponding page address
			"pagePath": "pages/tabbar/index/index",
			// display text
			"text": "front page",
			// Icon checked and unchecked
			"iconPath": "static/index1.png",
			"selectedIconPath": "static/index2.png"
		}, {
			// Corresponding page address
			"pagePath": "pages/tabbar/classfiy/classfiy",
			// display text
			"text": "Classification",
			"iconPath": "static/class1.png",
			"selectedIconPath": "static/class2.png"
		}, {
			// Corresponding page address
			"pagePath": "pages/tabbar/study/study",
			// display text
			"text": "study",
			"iconPath": "static/study1.png",
			"selectedIconPath": "static/study2.png"
		}, {
			// Corresponding page address
			"pagePath": "pages/tabbar/mine/mine",
			// display text
			"text": "mine",
			"iconPath": "static/my1.png",
			"selectedIconPath": "static/my2.png"
		}]
	}

Some friends here may not know where to find icon pictures, here you can go to the iconfont Alibaba vector icon library to find the icons you need, download them and use them, the official website address: https://www.iconfont.cn/

The specific steps to download the icon are:

1. search icon
2. Adjust the color according to your needs
3. Download the png format to the local, and then use it directly

📌The third step: still in the pages.json file, we need to set the first object in the pages configuration item array to the first page corresponding to our tabbar, if it is not configured here, the tabbar navigation bar will not be displayed , don't forget!

The fourth step is to configure each tabbar page into "pages", the code is as follows:

	"pages": [ //The first item in the pages array represents the application startup page, refer to: https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabbar/index/index",
			"style": {
				// The home page does not need to be configured
				// "navigationBarTitleText": "Home",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			}

		}, {
			"path": "pages/tabbar/classfiy/classfiy",
			"style": {
				// Top navigation bar title text content
				"navigationBarTitleText": "Classification",
				// Top navigation bar background color
				"navigationBarBackgroundColor": "#8ef400",
				// Top navigation bar title text color
				"navigationBarTextStyle": "white",
				// Whether to enable pull-down refresh
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/tabbar/study/study",
			"style": {
				"navigationBarTitleText": "study",
				"navigationBarBackgroundColor": "#8ef400",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/tabbar/mine/mine",
			"style": {
				"navigationBarTitleText": "mine",
				"navigationBarBackgroundColor": "#8ef400",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		}
	],

The final navigation bar effect looks like this:

The title of the top navigation bar looks like this

 

It's over here, just record it lightly!