如何根据 Ionic 2 中内容滚动的位置显示/隐藏按钮

Question

我想根据当前滚动位置的不同和动态 html 内容的高度显示一个按钮。

例如：如果我在底部并且当前位置和内容高度的差异小于 10px，那么按钮应该被隐藏。否则，它应该显示。

Answer 1

您可以使用带有 Content 组件的 @ViewChild 来获取视图的位置。

你的 HTML

<ion-content (ionScroll)="scrollFunction($event)">
  <!-- ALL YOUR CONTENT -->
  <button ion-button *ngIf="isShown">YOUR BUTTON<button>
</ion-content>

你的 .ts

import { ViewChild } from '@angular/core'; // NEEDED IMPORTS
import { Content } from 'ionic-angular';

export class yourPageClass {
  @ViewChild(Content) content: Content;
  public isShown: boolean = false; // YOU CAN INITIALIZE IN FALSE SO IT DOESN'T THROW ERROR AND BECAUSE IT'LL BE ON TOP OF PAGE.

  constructor(){}
  //THE FUNCTION THAT'LL DO THE MAGIG
  public scrollFunction = (event: any) => {
    let dimensions = this.content.getContentDimensions(); // GET THE ion-content DIMENSIONS
    let bottomPosition = dimensions.contentHeight + dimensions.scrollTop; // THE contentHeight IS THE SIZE OF YOUR CONTENT SHOWN ON SCREEN, THE scrollTop IS HOW MUCH YOU'VE SCROLLED FROM TOP OF YOUR CONTENT.
    let screenSize = dimensions.scrollHeight; // TOTAL CONTENT SIZE
    this.isShown = screenSize - bottomPosition <= 10 ? true : false;
  }
}

因此，如果您的滚动内容 + 屏幕内容比内容的总高度小 10 像素，则按钮将显示。

如果您需要显示大于或小于 10px 的按钮，只需更改 10 in this.isShown = screenSize - bottomPosition <= 10 ? true : false;

希望这可以帮助。