ionic-framework - 全屏查看离子移动应用程序

Question

我有一个离子移动应用程序。我在移动浏览器上运行。它有一个静态的标题。即使向下滚动，我也需要隐藏该 Web 应用程序的地址栏，但这不会发生。

它的标题如下，

<meta name="viewport" 
      content="initial-scale=1, 
      maximum-scale=1, 
      user-scalable=no, 
      width=device-width">

它在本机移动浏览器上运行。我使用控制台构建了应用程序。所以请帮我隐藏地址/标题栏并像 facebook 或其他网络应用程序一样运行

Answer 1

可以安装状态栏插件：

$ cordova plugin add org.apache.cordova.statusbar

或者对于科尔多瓦 5.0+：

$ cordova plugin add cordova-plugin-statusbar

并隐藏状态栏：StatusBar.hide();

.controller('MyCtrl', function($scope) {
  ionic.Platform.ready(function() {
    // hide the status bar using the StatusBar plugin
    StatusBar.hide();
  });
});

更多信息在这里和一个工作应用程序在这里。

离子 2 的更新

在 Ionic 2 中，情况有些不同。我们仍然需要安装cordova 插件状态栏，但我们需要从 ionic native 导入状态栏：

import {StatusBar} from 'ionic-native';

主类大致如下所示：

import {App, Platform} from 'ionic/ionic';
import {HomePage} from './home/home';
import './app.scss';

import {StatusBar} from 'ionic-native';

@App({
  template: `
    <ion-nav [root]="root"></ion-nav>
    <ion-overlay></ion-overlay>
  `,
})
export class MyApp {
  constructor(platform: Platform) {
    this.platform = platform;
    this.initializeApp();
    this.root = HomePage;

  }

  initializeApp() {
    this.platform.ready().then(() => {
      console.log('Platform ready');
      StatusBar.hide();
    });
  }
}

代码是从ionic native repository借来的。一个很好的教程可以在这里找到。

Answer 2

$cordova plugin add cordova-plugin-statusbar

在 Ionic 2 中需要安装 Cordova 插件状态栏，我们需要从 ionic native 导入状态栏：

import {StatusBar} from 'ionic-native';


import {App, Platform} from 'ionic/ionic';
import {HomePage} from './home/home';
import './app.scss';

import {StatusBar} from 'ionic-native';

@Component({
 templateUrl: 'home.html'
})
export class MyApp {
 constructor(platform: Platform) {
  this.platform = platform;
  this.initializeApp();
  this.root = HomePage;

   }

 initializeApp() {
   this.platform.ready().then(() => {
   StatusBar.hide();
   });
  }
  }

Answer 3

我遇到了同样的问题，并使用以下代码解决了它：

$ionicPlatform.ready(function() {
  ionic.Platform.fullScreen();
  if (window.StatusBar) {
    return StatusBar.hide();
  }
});