如何在离子内容滚动时自动隐藏按钮并在滚动停止时显示

Question

这是我的 HTML 文件，我在其中使用了 scroll function 事件。

<ion-content (ionScroll)="scrollFunction($event)">
    <ion-card *ngFor="let product of products" no-padding>
    <ion-item class="bigclass">
     <ion-thumbnail item-height="100px" item-start>
       <img-loader *ngIf="product.images" src="{{product.images[0].src}}" useImg></img-loader>
     </ion-thumbnail>
    </ion-card>
    <ion-infinite-scroll (ionInfinite)="loadMoreProducts($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll> 
</ion-content>
<ion-footer>
    <button class="proceed" *ngIf="isShown" ion-button full (click)="proceedPayment()">Proceed</button>
</ion-footer>    

这是我的 .ts 文件。它在向下滚动事件上隐藏按钮但不显示。我希望它在我向上或向下滚动 "Proceed" 按钮时起作用。它应该隐藏，当 ion-content 的滚动停止时，按钮应该可见。

public isShown:bolean=false;
constructor(public navCtrl:NavController){
    this.WooCommerce.getAsync('products?
      consumer_key=ck&consumer_secret=cs').then((result) => {
      console.log(JSON.parse(result.toJSON().body));
      this.products = JSON.parse(result.toJSON().body);
      console.log(this.products);
      this.products.forEach(product => { product.quantity = 1, 
      product.disabled=false;});
      return JSON.parse(result.toJSON().body);         
    }, (err) => {
      console.log(err)  
    })
}

public scrollFunction = (event: any) => {
    let dimensions = this.content.getContentDimensions(); 
    let bottomPosition = dimensions.contentHeight + dimensions.scrollTop; 
    let screenSize = dimensions.scrollHeight;
    this.isShown = screenSize - bottomPosition <= 10 ? true : false;
}

Answer 1

您可以在 ion-content

上绑定以下方法

• ionScrollStart

• ionScrollEnd

  <ion-content (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollStart($event)

并通过更新 isShown

来处理此事件

  scrollStart(event) {
     this.isShown = false;
   }

  scrollStop(event) {
     this.isShown = true;
  }