首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何消除移动应用程序(Ionic)顶部的空白?

如何消除移动应用程序(Ionic)顶部的空白?
EN

Stack Overflow用户
提问于 2018-08-02 02:29:56
回答 3查看 938关注 0票数 0

我的问题是,我的实际页面上总是有一个白条,上面写着iPhone上的时间、电池等信息。这很糟糕,因为当我触摸屏幕并上下移动时,页面将滚动以显示其后面的空白区域。

我的html看起来像这样:

代码语言:javascript
运行
复制
  <ion-content class="slides-scss">

  <ion-slides pager>
   <ion-slide *ngFor="let slide of slides">

  <ion-toolbar>
    <ion-buttons end>
      <button ion-button color="primary" [navPush]=closeSlides>Skip</button>
    </ion-buttons>
  </ion-toolbar>

  <ion-footer>
    <ion-row>
          <button ion-button [(navPush)] = "signUp">Sign Up</button>
          <button ion-button [(navPush)] = "login">Login</button>
    </ion-row>
  </ion-footer>

  <img [src]="slide.image" class="slide-image"/>
  <h2 class="slide-title" [innerHTML]="slide.title"></h2>
  <p [innerHTML]="slide.description"></p>

 </ion-slide>

<ion-slide>
  <ion-toolbar>
  </ion-toolbar>
  <!-- <img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/> -->
  <h2 class="slide-title">Sign Up Today!</h2>
  <button ion-button large clear icon-end color="primary" [navPush]=signUp>
    Sign Up
    <ion-icon name="arrow-forward"></ion-icon>
  </button>
</ion-slide>
</ion-slides>
</ion-content>

我的打字稿:

代码语言:javascript
运行
复制
import { Component } from '@angular/core';
import { TabsPage } from '../tabs/tabs';
import { NavController } from 'ionic-angular';
import { SignupPage } from '../signup/signup';
import { LoginPage } from '../login/login';

@Component({
 templateUrl: 'slides.html'
})
export class SlidesPage {

constructor (public navCtrl: NavController) {}

slides = [
    {
        title: "Welcome to Village!",
        description: "Meet ...kljsfdlfj.",
        image: "https://data.whicdn.com/images/219181569/large.jpg"
    },
    {
        title: "Connect & Build Community",
        description: "So you never feel alone.",
        image: "assets/imgs/singapore.jpg"
    }
];

closeSlides = LoginPage;
signUp = SignupPage;
login = LoginPage;

}

最后,scss:

代码语言:javascript
运行
复制
.slides-scss {
 .swiper-pagination-bullet-active {
   background: black;
 }

 .toolbar-background {
   background: linen;
   border-color: transparent;
 }

 .slide-zoom {
   height: 100%;
 }

 .slide-title {
   margin-top: 8.8rem;
   padding:  10px;
 }

  h2 {
   position: relative; 
  }

  p {
   padding: 0 40px;
   font-size: 14px;
   line-height: 1.5;
   color: #60646B;
   position: relative;

 b {
   color: #000000;
 }
}

ion-slide {
  background-color: linen;
 }

.slide-image {
  height: 100%;
  width: auto;
  z-index: 0;

 position: absolute;
}
}

理想情况下,图像会一直延伸到空白区。就像在这张图片中,颜色延伸到了空白区域。

EN

回答 3

Stack Overflow用户

发布于 2018-08-02 03:30:35

  • 尝试摆脱<ion-toolbar>,也许可以使用底部的按钮跳过
  • 尝试将状态栏的颜色更改为与正在显示的页面的背景颜色接近的颜色
  • 尝试通过设置<ion-content no-bounce></ion-content>或其他方法来禁用滚动
票数 1
EN

Stack Overflow用户

发布于 2018-08-02 02:32:37

您应该隐藏状态栏,如下所述:

https://ionicframework.com/docs/native/status-bar/

票数 0
EN

Stack Overflow用户

发布于 2018-08-02 04:00:59

在您的app.component.ts中:

代码语言:javascript
运行
复制
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';

constructor( platform : Platform,
             statusBar : StatusBar
             /* other service injections */ ) {

        platform.ready().then( () => {
             statusBar.backgroundColorByHexString( '#553399' );
        }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51640058

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档