WeChat applet realizes the transparent and hidden effect of the navigation bar at the top of the page (navigationBar) Welcome to like and favorite

We all know in the process of developing the WeChat applet that the color of the navigation bar can app.jsonbe windowadded to the attribute in the navigationBarBackgroundColorattribute , but the color inside can only be a solid color, and you cannot use a rgbcolor or rgbaa color number of .

demand analysis

But sometimes we want to achieve this effect, and we want to hide the navigation bar at the top transparently. At this time, we need to use our little brains to think about how to achieve it.

We can see if there is such a method on the official website: Navigation

The official website says: NavigationIt is the top navigation component of the applet. When the page configuration navigationStyleis set to custom, you can use this component to replace the native navigation bar.

Then, we know that this effect can be achieved. In fact, the code implementation is also super simple. Please see the code configuration below:


1. Hide the global top navigation bar

You can add in app.jsonit , and the navigation bar will disappear, leaving only the capsule-shaped button in the upper right corner.window:custom

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"

We have realized that the top navigation bar is hidden, so we can customize the top navigation bar according to our own needs, making our applet look more beautiful.

2. Hide the navigation bar at the top of some pages

Override the navigation bar configuration in the global by configuring the jsonfile .app.json


"window" : {
     // ... omitted for other configurations 
    "navigationStyle" : "default" 



If you want to hide the navigation bar on a certain page, you only need to set "navigationStyle":"custom"it .


Let’s see if it’s super simple. The reason we don’t know how to implement it is because we are not familiar with its related APIs. As long as we find the right method, it is still very easy.

I hope the above content will be helpful to your work and study. Welcome to one-click three links.

Come on everyone!

Leave a Comment

Your email address will not be published. Required fields are marked *