(Framework 5.5.0)
Transparent navbar will control the visibility (not scrolling) of the title, but usually add a searchbar to the title and want to be visible by default. If you do not use title, after opening a new page, the searchbar cannot be hidden, and the switching effect is very bad.
<div class="navbar navbar-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="search-container sliding">
<div class="searchbar searchbar-inline" @click="openSearchView">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search" disabled>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
</div>
</div>
<div class="right">
<a class="link icon-only">
<i class="icon f7-icons if-not-md">search</i>
<i class="icon material-icons md-only">search</i>
</a>
</div>
</div>
</div>
I also tried not to use title, and then added the fading class or control the transparency of the searchbar, but the animation effect after opening the page is still not elegant.
.ios .view:not(.view-master-detail) .navbar-previous .search-container {
opacity: 0;}