我正在尝试按照 ionic 模板示例所建议的“标准”方式来制作选项卡内容页面。
但是,我发现在Android中切换标签时,view-title会闪烁。您不会在 iOS 或桌面浏览器上看到闪烁。但是,如果您将 Chrome 中的设备模式切换到 Android 设备,您会看到闪烁。
我怎样才能克服它?
菜单.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/tab/content1">
Tab 1 Content 1
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
标签.html
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tab title="Content1" href="#/app/tab/content1">
<ion-nav-view name="tab-Content"></ion-nav-view>
</ion-tab>
<ion-tab title="Content2" href="#/app/tab/content2">
<ion-nav-view name="tab-Content2"></ion-nav-view>
</ion-tab>
</ion-tabs>
content1.html
<ion-view view-title="Bookmarks">
<ion-content>
<h1>Content 1</h1>
</ion-content>
</ion-view>
content2.html
<ion-view view-title="Bookmarks">
<ion-content>
<h1>Content 2</h1>
</ion-content>
</ion-view>
请您参考如下方法:
感谢@AndresRehn 分享链接 (http://forum.ionicframework.com/t/ionic-view-transition-flickering/27441)。通过在 CSS 中添加以下内容,可以轻松解决 android 上的标题闪烁问题。
/*
CSS styles to eliminate the annoying flickering header when changing tabs in an Ionic app on Android:
http://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281/2
*/
.platform-android .header-item.title {
transition-duration: 0ms;
}
.platform-android .header-item.buttons {
transition-duration: 0ms;
}