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
            }
        },
        ...
    ]
}

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:

onLoad life cycle function:

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

setNavigationBarVisible Method can dynamically modify the top bar properties:

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

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!