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