您的位置：首页 > Web前端 > AngularJS

angular4 滚动事件

2017-07-26 14:57 155 查看

内容

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);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航