草庐IT

javascript - ionic 避免 View 标题在 Android 上闪烁

coder 2025-03-15 原文

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

关于javascript - ionic 避免 View 标题在 Android 上闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32496367/

javascriptAndroidiongtltangularjscordovaionic-framework

有关javascript - ionic 避免 View 标题在 Android 上闪烁的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  4. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  5. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  6. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  7. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前，Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段，但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联，它们似乎是正确的，这可能与嵌套在公司下的项目有关，还是我遗漏了其他东西？提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关，但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  8. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  9. ruby-on-rails - 在 haml View 中重构条件 - 2

    除了可访问性标准不鼓励使用这一事实指向当前页面的链接，我应该怎么做重构以下View代码？#navigation%ul.tabbed-ifcurrent_page?(new_profile_path)%li{:class=>"current_page_item"}=link_tot("new_profile"),new_profile_path-else%li=link_tot("new_profile"),new_profile_path-ifcurrent_page?(profiles_path)%li{:class=>"current_page_item"}=link_tot("p

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐