Uniapp zero-based development study notes (3) - bottom navigation bar tabBar transfer

View the process of hello uni-app and moving the bottom navigation bar tabBar

1. Create navigation page

First, copy four index pages, still in the pages directory, and rename them to login/discovery/me, that is, login/discovery/my, for a total of four pages.

2. Copy static resources

Then copy the static directory of hello uni-app to the same location of the project. There are many pictures and fonts in it. It is best to use them for your own purposes without having to look for them everywhere.
Insert image description here

3. Add page definition

Declare all page definitions in pages.json. The first page is the first one displayed.
Insert image description here

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "主页"
			}
		},{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		},	
		{
			"path": "pages/discovery/discovery",
			"style": {
				"navigationBarTitleText": "发现"
			}
		},
		{
			"path": "pages/me/me",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}],

In this way, the page is defined.

4. Add bottom navigation bar definition

is still defined in pages.json, but a tabBar{} definition is added to the position after the pages[] array is defined.
Insert image description here
tabBar is defined using native system components. color is the default color, selectedColor is the selected color, backgroundColor is the background color, borderStyle is the border style, and the list array defines the four navigation buttons.
pagePath is the jump page address
text is the displayed button text
iconPath is the displayed icon image, which can be replaced here For the required icon file address, you can choose a suitable one from the static directory you just copied to replace it. I won’t replace it here.
selectedIconPath is the selected image. , which is also the icon address, and displays the selected effect in conjunction with the icon above.

 "tabBar": {
				"color":"#8a8a8a",
				"selectedColor":"#00aa00",
				"borderStyle":"black",
				"backgroundColor":"#ffffff",
				"list": [
					{
						"pagePath":"pages/index/index",
						"text":"主页",
						"iconPath":"static/home-active.png",
						"selectedIconPath":"static/home.png"
					},
					{
						"pagePath":"pages/login/login",
						"text":"登录",
						"iconPath":"static/logo.png",
						"selectedIconPath":"static/logo.png"
					},
					{
						"pagePath":"pages/discovery/discovery",
						"text":"发现",
						"iconPath":"static/logo.png",
						"selectedIconPath":"static/logo.png"
					},
					{
						"pagePath":"pages/me/me",
						"text":"我的",
						"iconPath":"static/logo.png",
						"selectedIconPath":"static/logo.png"
					}
				]	
			},

Compile and preview, the effect is pretty good, select the button to jump to the corresponding page.
Insert image description here