In mobile application development, it is often necessary to hide certain elements on the page. For example, in uniapp, hiding the top navigation bar on the homepage is a common requirement. This article will introduce how to use the API provided by uniapp to implement this function.
In uniapp, the basic structure of all pages is as follows:
Among them, the
tag is used to wrap the content of the page, If you want to hide the top navigation bar, just add a special attributenavigation-bar-fixed
on the
tag. Specifically, change the
tag to the following form:
In this way, the top navigation bar in the page will be hidden. It is important to note that sincenavigation-bar-fixed
is a custom attribute, it must be defined in the style of the page, otherwise the navigation bar will not be hidden. The style is defined as follows:
It should be noted that theapp-uni-status-bar
,app-uni-nav-bar
andpage-body
respectively represent the top status bar, navigation bar and page content area that comes with the system. They need to be hidden at the same time to achieve a complete navigation bar hiding effect.
To sum up, by adding custom attributes and modifying the page style, we can easily implement the function of hiding the top navigation bar in uniapp.
The above is the detailed content of Hide the top navigation bar on the uniapp homepage. For more information, please follow other related articles on the PHP Chinese website!