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

Question

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

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

Answer 1

您可以使用 @ViewChild with Content 组件来获取 View 的位置。

您的 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 的按钮，只需更改 this.isShown = screenSize - bottomPosition <= 10 ? true : false; 中的 10。

希望这对您有所帮助。