gogoWebsite

Hurry up and quietly work your way up to the top, and Buara would like to wish all of you great people the best of luck in your interviews.
Interview column to share, feel useful partners can point a subscription, from time to time to update the relevant interview questions:Interview Column 。

🍋 Preface:

Configure the bottom navigation bar first you need to prepare the icons you want to use, each tab can choose two icons, respectively, before the selection and after the selection. After that, we will use the icons provided by the official website of uniapp to configure the bottom navigation bar.
uniapp official website tabbar configuration items, without further ado directly on the body to learn how to configure the bottom of the navigation bar it.

🍍 Text

First let's take a look at the description in the official website:
If the application is a multi-tab application, you can specify the first level of navigation bar and the corresponding page to be displayed when the tab is switched via the tabBar configuration item.
Providing tabBar configuration in the app is not only to facilitate fast navigation development, but also to improve performance on the app and applet side. In these two platforms, the underlying native engine does not need to wait for the js engine to initialize at startup, it can directly read the tabBar information configured in the tabBar configuration and render the native tabs.

Tips

• When the position is set to top, the icon will not be displayed.
• The list in tabBar is an array, which can only be configured with a minimum of 2 and a maximum of 5 tabs, and the tabs are sorted in the order of the array.
• The tabbar switch may not render in time the first time it loads, so you can pop up a loading in the onLoad lifecycle of each tabbar page.
• Once a tabbar page has been shown once, it remains in memory. Switching tabbar pages again will only trigger onShow for each page, not onLoad.
• The top tabbar is currently only supported on WeChat apps. If you need to use the top tab, it is recommended to make your own top tab instead of using the tabbar's top setting, please refer to hello uni-app->template->top-tab.

1, first of all, we prepare their own projects need tab icon

I have prepared 6 sheets here for 3 tab switching use (pre and post selection, placed in the tabbar folder under the static folder:

2, find our file to configure

Find the globalStyle location and configure our tabbar below it.

The code snippet is below:

// Configure the tabbar navigation
"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#FB7299",
		"color": "#444444",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/",
				"selectedIconPath": "static/tabbar/",
				"text": "Discovery."
			},{
				"pagePath": "pages/cate/cate",
				"iconPath": "static/tabbar/",
				"selectedIconPath": "static/tabbar/",
				"text": "Classification"
			},{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabbar/",
				"selectedIconPath": "static/tabbar/",
				"text": "Mine."
			}
		]
	}

I believe that many partners do not know what these configuration items are the meaning of the following attached a screenshot of the configuration of the official website, you can also be linked from the contents of the foreword to go to the official website to check for themselves. (This case uses some of the most basic attributes.)

3. Configure the content of the navigation bar title

Official website address for the little ones
The content of the navigation bar title is shown below in the top position of our page:

Sample code is shown below: (I use some common configuration items, can be modified)

"pages": [ The first item in the //pages array represents the application startup page, see: /collocation/pages
{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Configure the bottom navigation bar"
			}
		}
	    ,{
            "path" : "pages/mine/mine",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "Mine.",
                "enablePullDownRefresh": false
            }
            
        },
		{
		    "path" : "pages/cate/cate",
		    "style" :                                                                                    
		    {
// Navigation bar header text content
"navigationBarTitleText": "Classification",
// Whether to enable dropdown refresh
"enablePullDownRefresh": false
		    }
		    
		}
    ],
// Default page style
"globalStyle": {
// Navigation bar title color and status bar foreground color, black/white only.
"navigationBarTextStyle": "black",
// The text content of the navigation bar title
"navigationBarTitleText": "Configure the bottom navigation bar",
// Navigation bar background color (same as status bar background color)
"navigationBarBackgroundColor": "#55aaff",
// The background color of the window that is displayed in the dropdown
"backgroundColor": "#ffff7f"
	}

I have written comments on the meaning of some configuration items, so you can see for yourself.

4, to see our results (effect)

That's it for this issue. It's an honor to share this with you.

🎃Column shared:

JavaScript related interview questions are updated here, related Web front-end interview questions can subscribe to the column Oh!🥰
Column address:"The Interview Essentials

---

⏳ $Quote:\; Say\; what\; you\; can,\; do\; what\; you\; say.$

✨ $It\text{'}s\; not\; easy\; to\; be\; original,\; but\; I\; hope\; you\; guys\; will\; support\; me.$

👍 $Kudos,\; your\; approval\; is\; what\; keeps\; me\; creating!$

⭐️ $Favorites,\; your\; favor\; is\; what\; I\; strive\; for!$

✏️ $Comment,\; your\; input\; is\; an\; asset\; to\; my\; progress!$