Hide the top navigation bar on the uniapp homepage

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, thetag is used to wrap the content of the page, If you want to hide the top navigation bar, just add a special attributenavigation-bar-fixedon thetag. Specifically, change thetag 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-fixedis 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-barandpage-bodyrespectively 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!