I am working to style a multiple pages App status bar. In most pages, which with a nav bar, it work well. Because the status bar background is just same as the nav bar background.
In a few pages I need to hidden the status bar, and show an image through the status bar area. Preview on below Photoshop draw image:
In fact, because this page have a colored status bar, so it look like this:
Thanks very much.
There is a tricky css way to do this.
In fact, since we have set viewport-fit=cover, so the body content has cover the all browser content. The status-bar display as a white bar is because of Framework7 set a padding-top: var(--f7-appbar-app-offset), so the white color is came form the Page
And there are two method provider of router: beforeEnter and beforeLeave.
So, we can change the status-bar background css value to the background-image we wanted to show, and clear it before leave.
I found some guys said splashscreen plugin to do this. I haven’t try.
Thanks for the trick! 
