Question

当我在标题中加载图像时，

离子标签和离子内容重叠离子标题，它只在我第一次访问页面时发生，之后它加载良好。 这是组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
public image: string;
appName = 'Ionic App';
constructor(public navController: NavController) { }
ionViewDidLoad(){
this.image = "https://source.unsplash.com/640x300/?technology"
}
}

这是html

<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
<img class="cabecera" [src]="image" width="100%">
</ion-header>
<ion-content padding class="contenido">
Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>.
</ion-content>

它可以查看这个plunker中的一个例子 https://plnkr.co/edit/CpBXmn?p=preview

Answer 1

问题是您只在加载其余内容后加载图像（在ionViewDidLoad函数中）。加载图片后，您需要调整内容大小，如this issue。

中所述

分别从ViewChild和Content添加@angular/core和ionic-angular到您的导入：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

使用@ViewChild选择ion-content组件的类：

// ...
export class HomePage {
    @ViewChild(Content) content: Content;
    // ...

然后，加载图像后，在content上调用resize方法：

this.content.resize();

IONIC 2离子含量与Android中的ion-header重叠

1 个答案: