在 Ionic 4 中自动隐藏浮动操作按钮

Question

我想在用户 scrollToBottom 时显示 scrollToTop 按钮，而当用户在顶部时只显示 scrollToBottom。如何管理按钮请帮助我...这是我的屏幕截图请帮助我如何管理这些按钮。

tab1.page.ts

    <ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button *ngIf="showToolbar" (click)="ScrollToTop($event)">
        <ion-icon name="arrow-dropup"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <ion-fab vertical="top" horizontal="end" slot="fixed">
      <ion-fab-button  (click)="ScrollToBottom($event)">
        <ion-icon name="arrow-dropdown"></ion-icon>
      </ion-fab-button>
    </ion-fab>

</ion-content>

tab1.page.ts

 ScrollToTop(event){
    this.content.ionScrollEnd.subscribe((data)=>{
      if(this.content){
        //console.log(data);
       this.showToolbar = true;
      }
     });
    this.content.scrollToTop(1500);

  }
  ScrollToBottom(){
    this.content.scrollToBottom(1500);
  }
  logScrollStart(){

   // console.log("logScrollStart : When Scroll Starts");
  }

  logScrolling(){


  }

  logScrollEnd(){
    this.content.ionScrollEnd.subscribe((data)=>{
      if(this.content){
        //console.log(data);
       this.showToolbar = true;
      }
     });

Answer 1

也许这有帮助

<ion-content cache-view="false" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
      (ionScrollEnd)="logScrollEnd()" [scrollEvents]="true">

  <ion-fab *ngIf="showTop" vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button *ngIf="showToolbar" (click)="ScrollToTop($event)">
      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-fab  *ngIf="showBottom" vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button  (click)="ScrollToBottom($event)">
      <ion-icon name="arrow-dropdown"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

和

ScrollToTop(event){
  this.content.ionScrollEnd.subscribe((data)=>{
    if(this.content){
      //console.log(data);
      this.showToolbar = true;
    }
  });
  this.content.scrollToTop(1500);
  this.showBottom=true;
  this.showTop=false;
}

ScrollToBottom(){
  this.content.scrollToBottom(1500);
  this.showTop=true;
  this.showBottom=false;
}

在 Ionic 4 中自动隐藏浮动操作按钮

Auto-hide Floating Action Button in Ionic 4

ionic-framework

ionic4