我正在尝试按照 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; 
} 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!