tabBar is a common page effect in mobile applications, used to implement multiple pages
quick switching. Small programs are usually divided into:
- bottom tabBar
- top tabBar
i.e. bottom/top navbar
Notice:
- Only a minimum of 2 and a maximum of 5 tabs can be configured in the tabBar
- When rendering the top tabBar, the icon is not displayed, only the text is displayed
first
Quickly create 3 corresponding tab pages through the pages node of the app.json file.
secondly
Write the tabber option and pages and window levels below, and add a tabBar node
In the tabBar node, add a list array, which stores the configuration object of each tab item In the
list array, add the configuration object of each tab item. The properties contained in the object are as follows:
pagePath specifies the page path corresponding to the current tab [required]
text specifies the text of the button on the current tab [required]
iconPath specifies the image path when the current tab is not selected [optional]
selectedIconPath specifies the current tab is selected Highlighted image path after selection [optional]
Each tabber page needs to prepare two pictures of the same style and different colors
The article is for reference only. If there are any mistakes, please point out or supplement them in time