In using Uni APP framework development, small programs, as the primary navigation bar and status bar is belong to the native framework for rendering, its level is higher than all content areas, including DCloud provide customized popup window component cannot achieve a primary purpose of the navigation bar, through technical data, there are a number of developers said can use nvue way to achieve this effect, But it feels like the implementation process is too cumbersome and not very compatible.

What’s an easy way to override the native navigation bar? The answer is yes, otherwise I wouldn’t be wasting your valuable time by writing this article. Anxious readers can look at the picture first, I gave the picture has achieved this effect.

The first thing to know is that setting the hierarchy (z-index) by CSS will not work, even if it is set to 1000000 or more (except for H5). This is due to the page rendering logic of the Uni framework.

Popup {z-index: 1000000} popup {z-index: 1000000}Copy the code

Some techniques might do it: the navigation bar and status bar to the custom, don’t use native way, it’s not solved the hierarchy problem yet, yes, yes, this is can solve the problem, but we all know, in the development of native navigation bar and status bar, whether on the rendering and each terminal compatibility are native can’t ratio. Using non-native methods is also beyond the scope of this article.

I’m here to introduce a method, but also is very simple, since we can’t through pop-up components to cover primary navigation bar, then can make a page, the pop-up window of another page rendering into play effect, as we all know, jump to the new page can be override native navigation bar and status bar, but the result is bad to jump to a new page, So what we did was to make the page into a popover, so that the user didn’t feel that they were going to a new page, just like the popup on the current page (such as the common function of claiming coupons in the product details page).

Vue: Pages /popup/coupon.vue: pages/popup/coupon. json:

{ "path": "pages/popup/coupon", "style": { "navigationStyle": "custom", "navigationBarTextStyle": "white", "app-plus": { "animationType": "fade-in", "background": "transparent", "backgroundColor": "transparent", "popGesture": "None" // turn off the IOS screen left swipe to turn off the current page function}}}Copy the code

We then write to the vue file (open type=”navigate”) where we need to pop up the page for the claim:

<navigator url="/pages/popup/coupon" hover-class="none">Copy the code

Only the above two steps have completed the effect of the custom popover covering the native navigation bar and status bar, and it is compatible with APP and small programs. It will be almost acceptable on THE H5 terminal, but it is also acceptable. If you want a better effect, it is recommended to use the method of setting the level described above.

Some users give feedback that this method is not good for interactive value transfer. In fact, this is not a problem and there are solutions, we can use uni.setStorageSync or direct page parameter transfer.



The uni source code can be downloaded from the Dcloud plugin market for free:Can override the native navigation bar and status bar popover effect