Блог

Я хочу показывать кнопку scrollToTop, когда пользователь scrollToBottom, а когда пользователь вверху, тогда отображается только 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;
      }
     });
  

Может быть, это помогает

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