Tabbar settings

• ask ：tabbar What does it do ？

• answer ： Bottom navigation

• ask ： What are the components of

• answer ：

  • "pagePath": "pages/index/index"    Page path

  •  "text": " home page "    Page name

  •   "iconPath":"/images/tabbar/home.png"    When not selected , Pictures on display

  •  "selectedIconPath":"/images/tabbar/home-active.png"  Picture when selected

    Pictured

    

1.  The first problem is tabbar Set up

Document links 1 uni-app Official website https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

Document links 2

uni.setTabBarItem(OBJECT) | uni-app Official website https://uniapp.dcloud.io/api/ui/tabbar.html

2.   Put what you need tabbar Put the picture of '“static” In the folder

3. Follow the example prompted by the document , Add our own tabbar（ Because I have written Baidu applet here tabbar, After a look, the code is almost the same , So copy it directly ）

chart 1

Code ( Among them xxx Replace with your own page folder name and page name )

	"tabBar": {
		"list": [{
				"pagePath": "pages/index/index",
				"text": " home page ",
				"iconPath": "static/images/tabbar/home.png",
				"selectedIconPath": "static/images/tabbar/home-active.png"
			},
			{
				"pagePath": "pages/xxx/xxx",
				"text": "xxx",
				"iconPath": "static/images/tabbar/counrty.png",
				"selectedIconPath": "static/images/tabbar/country-active.png"
			},
			{
				"pagePath": "pages/xxx/xxx",
				"text": "xxx",
				"iconPath": "static/images/tabbar/news.png",
				"selectedIconPath": "static/images/tabbar/news-active.png"
			},
			{
				"pagePath": "pages/xxx/xxx",
				"text": "xxx",
				"iconPath": "static/images/tabbar/ask.png",
				"selectedIconPath": "static//images/tabbar/ask-active.png"
			},
			{
				"pagePath": "pages/xxx/xxx",
				"text": "xxx",
				"iconPath": "static/images/tabbar/me.png",
				"selectedIconPath": "static//images/tabbar/me-active.png"
			}

		],
		"backgroundColor": "#ffffff",
		"borderStyle": "white",
		"color": "#000",
		"selectedColor": "#6495ED"
	},

After doing this , Your project has a bottom navigation

Here's something else ,

• pages Configure the page path , A set of curly braces represents the configuration of a page
• path    Is the path of the page in the project
• navigationBarTitleText  It's the title of the page