页面滚动和回到顶部

本来应该在开发的过程中多写文章的，一直处于忙碌的状态而忽略了。。。现在也不知道能够写什么内容了。

今天就说一下页面滚动方面。

ion-content 可绑定 ionScroll、ionScrollStart、ionScrollEnd 方法，如下：

<ion-content (ionScroll)="scrolling()" (ionScrollEnd)="scrollEnd()" (ionScrollStart)="scrollStart()"></ion-content>

ionScroll 方法表示页面滚动时触发，只要在滚动就会一直触发。

ionScrollStart 方法表示本次滚动开始时触发。

ionScrollEnd 方法表示本次滚动结束时触发。

我们往往会在右下角设置一个回到顶端的按钮，而且在页面滚动到一定距离后才会出现这个按钮。

此时我们可以给 ionScroll 绑定一个方法，实时监测距离页面顶部的距离。

首先，我们需要引入 ViewChild 和 Content，如下：

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

然后在当前类中声明一下对象：

@ViewChild(Content) content: Content;

可以通过 let topDistance = this.content.getContentDimensions().scrollTop; 来获取与顶部之间的距离。

下一步是需要获取我们要操作的按钮的对象，控制其显示与隐藏：

let myFab = this.el.nativeElement.querySelector('ion-fab');
if (topDistance > 100) {
  this.renderer.setElementStyle(myFab, "display", "");
} else {
  this.renderer.setElementStyle(myFab, "display", "none");
}

通过点击按钮回到顶部就可以如下操作：this.content.scrollToTop(duration);

其中参数 duration 为回到顶部所需的时间，并且该方法返回的是 Promise 对象，你可以在滚动结束后进行一系列你想做的事情。

当然还有 scrollToBottom(duration) 方法滚动到底端以及 scrollTo(x, y, duration) 滚动到任意一个位置。