How to hide the top bar button in uniapp

With the popularity of mobile applications, it has become more and more common to use frameworks to develop mobile applications. UniApp is a cross-platform application framework that uses Vue.js syntax and supports compilation to multiple platforms. Hiding top bar buttons is a skill to master in UniApp development. This article will take UniApp as an example to introduce how to hide the top bar button.

1. What is the top bar button

In UniApp, the top bar is a navigation bar fixed at the top of the page, which can render the left return arrow, middle title, right button, etc. content. Among them, the right button is the top bar button. Usually, the top bar buttons are used to trigger some actions that require user operations, such as search, sharing, settings and other functions.

2. How to hide the top bar button

In UniApp, you can hide the top bar button by specifying the navigationBarHidden property of the page. The following are the specific implementation steps:

1. Find the corresponding page in the pages.json file:

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        ...
    ]
}

2. Add ## to the style of the page #navigationBarHidden attribute, the value is true:

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationBarHidden": true
            }
        },
        ...
    ]
}

3. Recompile the project and run it, you can see that the top bar button has been hidden.

3. Implement dynamic hiding of the top bar button

In addition to statically setting the

navigationBarHidden attribute in the pages.json file, UniApp also provides A method that can dynamically modify the properties of the top bar. The following are the specific implementation steps:

1. Get the current page object in the

onLoad life cycle function:

export default {
    data() {
        return {}
    },
    onLoad() {
        this.pageObj = this.$mp.page
    }
}

2. Call where the top bar button needs to be hidden

setNavigationBarVisible Method can dynamically modify the top bar properties:

this.pageObj.$vm.$root.$mp.page.meta.setNavigationBarVisible({
    navigationBarHidden: true
})

3. Recompile the project and run it, you will see that the top bar button has been dynamically hidden.

4. Summary

UniApp is a very powerful cross-platform application framework. It not only supports compilation to multiple platforms, but also provides a rich API and component library, which is very convenient to develop. . This article introduces how to hide the top bar button, including static and dynamic methods, and hopes to be helpful to UniApp developers. During the actual development process, if you encounter any problems, please consult the official documentation or consult relevant professionals in time.

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