ionic-framework - ionic 2 3、为什么滚动后变量的值没有变化？

Question

我写了这段代码，用于在滚动超过 500 像素后显示按钮，但“showButton”没有获得新值。

<ion-content (ionScroll)="onScroll($event)">
    <button *ngIf="showButton">Scroll Top</button>
</ion-content>

我的.ts 文件:

showButton= false;

onScroll($event) {    
  if ($event.scrollTop > 500) {
    console.log(this.showButton);
    this.showButton= true;
  }
}

此 console.log 显示“showButton”的更改，但在 html 中它没有更改。

“showButton”第一次得到值“false”但是当值变为“true”时它无法监听变化，我该如何解决这个问题？

Answer 1

From the ionic docs, Scroll Events Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a zone.run()

<ion-content (ionScroll)="onScroll($event)">
        <button *ngIf="showButton">Scroll Top</button>
</ion-content>

    //add import in .ts file

    import { Component, NgZone } from '@angular/core';


    //in constructor 

    constructor(
        public zone: NgZone,



    showButton= false;

    onScroll($event) {
        this.zone.run(() => {
          if ($event.scrollTop > 500) {
            console.log(this.showButton);
            this.showButton = true;
          }
        })
      }