我正在使用Ionic对移动应用程序页面进行编码,并且遇到了一个我似乎无法摆脱的问题。
我的问题是iPhone上的时间,电池等始终在我的实际页面上方始终出现白色条带。之所以糟糕,是因为当我触摸屏幕并将其上下移动时,页面将滚动以显示其后面的空白区域。
我的html看起来像这样:
<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>
我的打字稿:
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:
.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;
}
}
理想情况下,图像将一直延伸到空白区域。 就像这张图片一样,颜色在白色空间上延伸。
我真的不知道我在做什么,请帮助新手程序员ahhhh !!
答案 0 :(得分:1)
<ion-toolbar>
,也许可以使用底部的按钮跳过<ion-content no-bounce></ion-content>
或其他方法this post来禁用滚动。答案 1 :(得分:0)
您应按以下说明隐藏状态栏:
答案 2 :(得分:0)
在您的app.component.ts中:
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' );
}
}