Content

内容组件提供了一个易于使用的内容区域，并提供了一些有用的方法来控制可滚动区域。 在一个视图组件中只应该有一个内容。 如果需要其他可滚动元素，请使用ionScroll。

内容区域还可以通过刷新组件来实现刷新。

使用

<ion-content>
  Add your content here!
</ion-content>

要从页面的逻辑中引用内容组件，可以使用Angular的@ViewChild注释：

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

实例成员

addImg()

contentBottom

一个数字表示内容底部已经调整了多少个像素，可以通过填充或边距进行调整。 这种调整是为了说明页脚所需的空间。

Returns:

number

contentHeight

可见区域的内容高度。 这不包括在溢出区域之外的内容或页眉和页脚下的内容区域。 只读。

Returns:

number

contentTop

一个数字表示内容顶部已经调整了多少个像素，可以通过填充或边距进行调整。 此调整是为了解决标题所需的空间。

Returns:

number

contentWidth

内容宽度包括由于溢出而在屏幕上不可见的内容。 只读。

Returns:

number

directionX

当前或最后已知的水平滚动方向。 可能的字符串值includeeright和left。

Returns:

string

directionY

当前或最后已知的垂直滚动方向。 可能的字符串值包括在内。

Returns:

string

getContentDimensions()

返回内容和滚动元素的维度。

Returns:

object

尺寸内容和滚动元素的尺寸

getFixedElement()

isScrolling

内容是否正在滚动或不正在滚动。

Returns:

boolean

resize()

告诉内容重新计算其尺寸。 在动态添加/删除页眉，页脚或选项卡后，应该调用此操作。

scrollHeight

内容高度包括由于溢出而在屏幕上不可见的内容。 只读。

Returns:

number

scrollLeft

内容左边距离最左边的可见内容。

Returns:

number

scrollTo(x, y, duration)

滚动到指定的位置。

Returns:

Promise

返回在滚动完成时解决的承诺。

scrollToBottom(duration)

滚动到内容组件的底部。

Returns:

Promise

返回在滚动完成时解决的承诺。

scrollToTop(duration)

滚动到内容组件的顶部。

Returns:

Promise

返回在滚动完成时解决的承诺。

scrollTop

内容顶部距离最上方的可见内容。

Returns:

number

scrollWidth

内容宽度包括由于溢出而不可见的内容。 只读。

Returns:

number

输入属性

输出事件

高级

调整内容大小 如果 ion-header，ion-footer 或 ion-tabbar 的高度动态变化，则必须调用content.resize（）才能更新Content的布局。

@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Main Navbar</ion-title>
      </ion-navbar>
      <ion-toolbar *ngIf="showToolbar">
        <ion-title>Dynamic Toolbar</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
    </ion-content>
`})

class E2EPage {
  @ViewChild(Content) content: Content;
  showToolbar: boolean = false;

  toggleToolbar() {
    this.showToolbar = !this.showToolbar;
    this.content.resize();
  }
}

滚动到特定位置

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  template: `<ion-content>
               <button ion-button (click)="scrollTo()">Down 500px</button>
             </ion-content>`
)}
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollTo() {
    // set the scrollLeft to 0px, and scrollTop to 500px
    // the scroll duration should take 200ms
    this.content.scrollTo(0, 500, 200);
  }
}

Sass 变量

• iOS