How to remove top navigation in uniapp

When developing a uni-app application, it is often necessary to make different designs and adjustments for different pages. Among them, sometimes we need to remove the top navigation to achieve a more free and personalized design effect.

In uni-app, it is not difficult to remove the top navigation. You only need to make simple settings in the configuration file of the page.

The specific steps are as follows:

1. Find the page where the top navigation needs to be removed, and enter the .vue file of the page.
2. In the .vue file, find the content in . Among them, the code in is the content displayed on the uni-app application page, and it is also the part that we can customize and adjust.
3. After , add the following code:

<style lang="scss">
    /*去除顶部导航*/
    .uni-page-head{
        display:none!important;
    }
</style>

Among them, the style writing language is scss, you can choose according to your own needs and familiarity Different ways of writing styles. As for the meaning of the style itself, it can be simply summarized as hiding the .uni-page-head element in the page.

It should be noted that the .uni-page-head element is an element provided by the uni-app framework for displaying the top navigation. Therefore, by hiding it, the effect of removing the top navigation can be achieved.

4. Save the .vue file and reload the page in the application. At this point, you can see the page with the top navigation removed.

To sum up, it is not difficult to remove the top navigation in the uni-app page. Through simple style operations, we can customize and adjust a single page or multiple pages to achieve a more personalized and free design effect.

The above is the detailed content of How to remove top navigation in uniapp. For more information, please follow other related articles on the PHP Chinese website!