Configure the bottom tabbar using the UniApp native component

If the application is a multi-tab application, you can use the tabBar configuration item to specify the performance of the TAB bar and the corresponding page to be displayed when the TAB is switched. \

The article directories

Start the configuration

Tabbar configuration options are equivalent to Pages

Tabbar configuration items are as follows:
attribute introduce
color Default color of text on TAB
selectedColor The color of the text on TAB when selected
backgroundColor The background color of TAB
list A list of at least 2 to maximum 5 tabs

The above are common configuration options. For other configuration items, see the official website of UNIapp

Tabbar-list Configuration items:
attribute introduce
pagePath The page path, which must be defined in Pages first
text TAB button text, optional on App and H5 platform. For example, an icon with a + sign without text can be placed in the middle
iconPath Image path,Icon size limit is 40KBThe recommended size is 81px by 81px.When postion is TOP, this parameter is invalid. Network images and font ICONS are not supported
selectedIconPath selectedImage path,Icon size limit is 40KBThe recommended size is 81px by 81px.This parameter is invalid when postion is TOP

Once you understand the hierarchy and function of these configuration items, you are ready to configure a basic Tabbar

Reference code:
{
	"pages": [ / / pages start page, said the first item in the array application reference: https://uniapp.dcloud.io/collocation/pages... ] ."globalStyle": {
		……
	},
	"tabBar": {"selectedColor":"white"."list":[
			{
				"text":"Home page"."pagePath":"pages/index/index"."iconPath":"static/Homehomepagemenu.png"."selectedIconPath":"static/HOME.png"
			},
			{
				"text":"News"."pagePath":"pages/news/news"."iconPath":"static/news.png"."selectedIconPath":"static/news_1.png"
			},
			{
				"text":"Shopping cart"."pagePath":"pages/cart/cart"."iconPath":"static/cart.png"."selectedIconPath":"./static/cart_1.png"
			},
			{
				"text":"Members"."pagePath":"pages/member/member"."iconPath":"./static/LC_icon_user_fill_1.png"."selectedIconPath":"static/user.png"}]."backgroundColor":"#c41e00"}}Copy the code

The effect is as follows:

// Hope the above content can help you 😄, might as well click a like