angular4 滚动事件

 内容

ion-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

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

返回： number

 contentHeight

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

返回： number

 contentTop

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

返回： number

 contentWidth

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

返回： number

 directionX

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

返回： string

 directionY

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

返回： string

 getContentDimensions()

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

返回： object

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

属性	类型	细节
dimensions.contentHeight	number	内容offsetHeight
dimensions.contentTop	number	内容偏移量
dimensions.contentBottom	number	内容offsetTop + offsetHeight
dimensions.contentWidth	number	content offsetWidth
dimensions.contentLeft	number	内容offsetLeft
dimensions.contentRight	number	content offsetLeft + offsetWidth
dimensions.scrollHeight	number	滚动scrollHeight
dimensions.scrollTop	number	滚动scrollTop
dimensions.scrollBottom	number	滚动ScrollTop + scrollHeight
dimensions.scrollWidth	number	滚动scrollWidth
dimensions.scrollLeft	number	滚动滚动
dimensions.scrollRight	number	滚动scrollLeft + scrollWidth

 getFixedElement()

 isScrolling

如果内容正在滚动或不正在滚动。

返回： boolean

 resize()

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

 scrollHeight

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

返回： number

 scrollLeft

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

返回： number

 scrollTo(x, y, duration)

滚动到指定的位置。

帕拉姆	类型	细节
X	number	要滚动到的x值。
ÿ	number	要滚动到的y值。
持续时间	number	滚动动画的持续时间，以毫秒为单位。默认为300。可选的

返回： Promise

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

 scrollToBottom(duration)

滚动到内容组件的底部。

帕拉姆	类型	细节
持续时间	number	滚动动画的持续时间，以毫秒为单位。默认为300。可选的

返回： Promise

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

 scrollToTop(duration)

滚动到内容组件的顶部。

帕拉姆	类型	细节
持续时间	number	滚动动画的持续时间，以毫秒为单位。默认为300。可选的

返回： Promise

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

 scrollTop

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

返回： number

 scrollWidth

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

返回： number

输入属性

ATTR	类型	细节
全屏	boolean	如果为true，内容将在页眉和页脚后面滚动。通过将工具栏设置为透明，可以很容易地看到此效果。
scrollDownOnLoad	boolean	如果为true，内容将在加载时向下滚动。

输出事件

ATTR	细节
ionScroll	每次滚动事件发生。
ionScrollEnd	滚动结束时发出。
ionScrollStart	滚动首次启动时发出。

高级

滚动事件

滚动事件发生在Angular区域之外。这是出于性能原因。所以如果你试图绑定一个值到任何滚动事件，它将需要被包装在一个zone.run()

import { Component, NgZone } from '@angular/core';
@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title></ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content (ionScroll)="scrollHandler($event)">
       <p> Some realllllllly long content </p>
    </ion-content>
`})
class E2EPage {
 public scrollAmount = 0;
 constructor( public zone: NgZone){}
 scrollHandler(event) {
   console.log(`ScrollEvent: ${event}`)
   this.zone.run(()=>{
     // since scrollAmount is data-binded,
     // the update needs to happen in zone
     this.scrollAmount++
   })
 }
}

这可以用于任何滚动事件，而不只是ionScroll。

调整内容大小

如果要更新布局的高度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);
  }
}