How to cancel bottom navigation in uniapp

With the popularity of mobile devices, modern applications are paying more and more attention to UI/UX design. Under this trend, many applications add their important functions to the bottom navigation bar to make it easier for users to access. However, in some cases it may be more appropriate to eliminate the bottom navigation bar. This article will discuss how to cancel the bottom navigation bar in Uniapp.

First, let’s review Uniapp’s bottom navigation bar component. The bottom navigation component is a reusable component, usually located at the bottom of an application, that displays icons and labels for multiple pages or features. These pages or features are usually the core functionality or main modules of the application.

1. Cancel the bottom navigation of a single page

It is very simple to cancel the bottom navigation of a single page. In the page where you need to hide the bottom navigation bar, just add the following code in the <script> of the page: </script>

export default {
    config: {
        "disableScroll": true,
        "navigationBarTitleText": "My Page",
        "usingComponents": {}
    },
    onShow() {
        uni.hideTabBar({
            animation: true
        });
    },
    onHide() {
        uni.showTabBar({
            animation: true
        });
    }
}

In the code, we use the life cycle hook of the Uniapp component to hide it when the page is displayed Bottom navigation bar, and display the bottom navigation bar again when the page is hidden.

2. Cancel bottom navigation on multiple pages

If you need to cancel bottom navigation on multiple pages, we can add the following code to the App.vue file:

export default {
    config: {
        "disableScroll": true,
        "navigationBarTitleText": "My App",
        "usingComponents": {}
    },
    onShow() {
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1];
        if (currentPage.route === 'pages/home/index' || currentPage.route === 'pages/user/index') {
            uni.hideTabBar({
                animation: true
            });
        } else {
            uni.showTabBar({
                animation: true
            });
        }
    }
}

In the code, we use the life cycle hook onShow() in the App.vue file. Whenever the page is displayed, we get the route of the current page and determine whether the bottom navigation bar needs to be hidden on the current page. If it needs to be hidden, we use the hideTabBar method provided by Uniapp to hide the bottom navigation bar, otherwise we display the bottom navigation bar.

To sum up, canceling the Uniapp bottom navigation bar is very simple. We only need to add the corresponding code to the page where the bottom navigation needs to be hidden or in the App.vue file where the bottom navigation display needs to be controlled. Of course, if you need a higher degree of customization and control, this component also provides more properties and methods. Please refer to the Uniapp documentation for details.

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