angular中可通过ion-content指令来控制滚动条，ionContent指令提供一个易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。
内容组件提供了一个易于使用的内容区域，并提供了一些有用的方法来控制可滚动区域。在一个视图组件中只应该有一个内容。如果需要其他可滚动元素，请使用ionScroll。
内容区域还可以通过刷新组件来实现刷新 。
ion-content的用法：
Add your content here!
要从页面的逻辑中引用内容组件，可以使用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.contentHeightnumber内容offsetHeight
dimensions.contentTopnumber内容偏移量
dimensions.contentBottomnumber内容offsetTop + offsetHeight
dimensions.contentWidthnumbercontent offsetWidth
dimensions.contentLeftnumber内容offsetLeft
dimensions.contentRightnumbercontent offsetLeft + offsetWidth
dimensions.scrollHeightnumber滚动scrollHeight
dimensions.scrollTopnumber滚动scrollTop
dimensions.scrollBottomnumber滚动ScrollTop + scrollHeight
dimensions.scrollWidthnumber滚动scrollWidth
dimensions.scrollLeftnumber滚动滚动
dimensions.scrollRightnumber滚动scrollLeft + scrollWidth
getFixedElement()
isScrolling
如果内容正在滚动或不正在滚动。
返回： boolean
resize()
告诉内容重新计算其尺寸。在动态添加/删除页眉，页脚或选项卡后，应该调用此操作。
scrollHeight
内容高度包括由于溢出而在屏幕上不可见的内容。只读。
返回： number
scrollLeft
内容左边距离最左边的可见内容。
返回： number
scrollTo(x, y, duration)
滚动到指定的位置。帕拉姆类型细节Xnumber要滚动到的x值。
ÿnumber要滚动到的y值。
持续时间number滚动动画的持续时间，以毫秒为单位。默认为300。可选的
返回： Promise
返回在滚动完成时解决的承诺。
scrollToBottom(duration)
滚动到内容组件的底部。帕拉姆类型细节持续时间number滚动动画的持续时间，以毫秒为单位。默认为300。可选的
返回： Promise
返回在滚动完成时解决的承诺。
scrollToTop(duration)
滚动到内容组件的顶部。
返回： Promise
返回在滚动完成时解决的承诺。
scrollTop
内容顶部距离最上方的可见内容。
返回： number
scrollWidth
内容宽度包括由于溢出而不可见的内容。只读。
返回： number
输入属性ATTR类型细节全屏boolean如果为true，内容将在页眉和页脚后面滚动。通过将工具栏设置为透明，可以很容易地看到此效果。
scrollDownOnLoadboolean如果为true，内容将在加载时向下滚动。
输出事件ATTR细节ionScroll每次滚动事件发生。
ionScrollEnd滚动结束时发出。
ionScrollStart滚动首次启动时发出。
滚动事件
滚动事件发生在Angular区域之外。这是出于性能原因。所以如果你试图绑定一个值到任何滚动事件，它将需要被包装在一个zone.run()import { Component, NgZone } from '@angular/core';
@Component({
template: `
Some realllllllly long 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: `
Main Navbar
Dynamic Toolbar
Toggle Toolbar
`})
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: `
Down 500px
`
)}
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);
}
}
