Custom tabBar components.
On the applet and app side, to improve performance, configure a fixed native tabBar in
pages.json. But on the H5 side, this design does not improve performance.
At the same time, H5 side, especially PC widescreen, has more flexible requirements for the location and style of tabBar. tabBar, as the first level navigation, is more often placed at the top of PC webpage than at the bottom.
The custom tabBar component came into being as needed. It still reads the tabBar information configured in
pages.json, but it can customize the location and configure various css flexibly.
This component supports the related configuration of
pages.json (compatibility is consistent with H5), and the configuration of
borderStyle is not supported.
This component supports all
tabBar related APIs, such as setting the tab logo, displaying the red dot, and switchTab.
Only supported on the H5 side，HBuilderX 2.9.9+.
|Arrangement direction of items, options include: horizontal, vertical
|Whether to display icon?
|Checked tabBar option index value
|Click the event with the parameter of Object. See the table below for details
|The serial number of the clicked tabItem, starting from 0
|The page path of the clicked tabItem
|The buttom text of the clicked tabItem
This component does not need to configure the list of tabBar, each tabItem is still read from
pages.json. Avoid writing the duplicated codes at multiple sides.
hello uni-app, place a custom tabBar component in topWindow, and place the page-level navigation at the top of the page.
<!-- This example does not include the complete css, please refer to the above to obtain the external css. View it in the top-window of hello uni-app project -->
<custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
Sample experience: Open https://hellouniapp.dcloud.net.cn/ with PC browser
Obtain source code: build a new uni-app project with HBuilderX 2.9.9+ and above version, and select the hello uni-app template.
See the screenshot below for display effect:
custom-tab-bar horizontal layout (horizontal):
custom-tab-bar vertical layout (vertical):