javascript - ionic 空白模板隐藏附件栏默认不起作用

标签 javascript ionic-framework statusbar

嗨,我开始了一个空白的 ionic 项目。在app.js文件中有这样的代码:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

据我了解,上面的代码确实做了两件事。它隐藏了键盘上方的附件栏。它将您的状态栏样式设置为默认样式。

看起来两者似乎都不起作用。当我测试我的应用程序时, ionic View 应用程序的附件栏仍然在那里。

当我更改状态栏样式代码的部分时

StatusBar.styleDefault();

StatusBar.overlaysWebView(true); StatusBar.styleLightContent();

状态栏仍然是默认样式(深色),我想要浅色样式的状态栏。

我是否做错了什么,我是否遗漏了什么,或者我对上面的代码的理解是否错误。

谢谢!!

配置.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.testapp582099" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>test_app</name>
  <description>
        An Ionic Framework and Cordova project.
    </description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">
      Ionic Framework Team
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
</widget>

最佳答案

添加插件后它应该可以工作:

$ cordova plugin add org.apache.cordova.statusbar

由于某种原因,该插件不会自动安装在 Ionic 入门项目上,即使在代码中使用了该插件。更多信息:http://learn.ionicframework.com/formulas/customizing-the-status-bar/

要在 Ionic View 中实现此功能,您可能需要做更多工作。

  • 安装 ngCordova:http://ngcordova.com/docs/install/ 。确保ng-cordova.js生活之间angular.jscordova.js 。无论如何,如果您想使用更多 ngCordova 插件,拥有它也不错。
  • 作为 Angular 依赖项注入(inject) angular.module('myApp', ['ngCordova'])
  • 运行$ cordova plugin add cordova-plugin-statusbar 。请先删除上面的插件(它们可能相同也可能不同......)。
  • 注入(inject)$cordovaStatusbar进入你的.run block (如果需要,您也可以注入(inject) Controller 等)。
  • 像以前一样使用,但像这样:$cordovaStatusbar.hide() .
  • 如果您的代码位于 $ionicPlatform.ready ,它可能无法在 Ionic View 中按预期工作(请参阅: https://github.com/driftyco/ionic-view-issues/issues/52 )。要使其正常工作,请将其包装在 $timeout 中, 或者

    So if you aren't adverse to a small hack, adding <script>window.phonegap = {}</script> to your <head> before Ionic loads should force it to wait for the deviceready event without stepping on Cordova's toes once it does load. Much simpler than writing $timeout everywhere.

关于javascript - ionic 空白模板隐藏附件栏默认不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30264793/

相关文章:

javascript - 如何从 ionic 弹出窗口中删除不需要的空间

android - 隐藏平板电脑系统栏

javascript - Firefox 4 替代状态栏消息

javascript - 在正确的输入上使用 js 重新启用提交按钮

javascript - 从 GeoJSON 绘制 SVG 路径时出现解析错误

ionic-framework - ionic - ion-nav-buttons ng-click 不起作用

ios - iOS 7 上的全屏 UIViewController

javascript - WebView2:通过 Javascript 代码在 C# 中设置对象属性

javascript - 我们可以使用正则表达式一次解析多个规则吗?

jquery - 问题侧面菜单栏