ionic2 - 滚动触发

Question

我只想在页面滚动到特定点时显示我的ion-header

html

<ion-header  *ngIf="headered"><!--use ngif to trigger-->
  <ion-navbar>
    some content
  </ion-navbar>
</ion-header>

所以会通过滚动触发：

ts

import { ..., Content } from 'ionic-angular';

...
@ViewChild(Content) content:Content;

headered = false;
...
ngAfterViewInit() {
    this.content.addScrollListener(this.onPageScroll);
}

onPageScroll(event) {
    console.log(event.target.scrollTop);
    if(event.target.scrollTop > 640){
      this.headered = true;
      console.log(this.headered);///<-- this did trigger when scroll more than 640
    }else{
      this.headered = false;
    }
}

我确实在控制台中得到了true，但标题没有出现。我通过添加一个调用此函数的按钮再次对其进行测试：

toggleHeader(){
  this.headered = (this.headered == false) ? true : false;
}

并且标题确实显示和隐藏了方面。

为什么滚动事件不能让标题显示？我该如何解决这个问题？

更新01

我试过了：

scrollCount = 0;

...

onPageScroll(event) {
    this.scrollCount = event.target.scrollTop;
console.log(this.scrollCount);///<-- this give me reading
}

///then use ngDoCheck to detect:

ngDoCheck(){
console.log(this.scrollCount);///<-- this always get 0.
}

正如您在onPageScroll() 中看到的那样，我开始阅读，但我没有阅读。我怀疑它与@ViewChild(Content) content:Content; 有关，ionic2 在their doc 中建议。

Answer 1

就像你说的，看看Content - Ionic Docs我发现了：

调整大小（）

告诉内容重新计算其尺寸。 这应该叫 在动态添加页眉、页脚或选项卡之后。

因此，由于您通过执行获取内容的实例

@ViewChild(Content) content:Content;

尝试以下方法：

onPageScroll(event) {
    console.log(event.target.scrollTop);
    if(event.target.scrollTop > 640){
      this.headered = true;
      console.log(this.headered);///<-- this did trigger when scroll more than 640
    }else{
      this.headered = false;
    }

    // Update the content since the header was shown / hidden
    this.content.resize();
}

编辑

由于onPageScroll 被调用了很多次，您只需要在scrollTop 高于640 并且标题未显示时更新内容，（或当scrollTop 小于或等于 640 并且标题正在显示）让我们稍微更改一下代码：

onPageScroll(event) {
    console.log(event.target.scrollTop);
    if(event.target.scrollTop > 640 && !this.headered){
      // If the scrollTop is higher than 640 and the header is hidden, we need to show it (this prevent trying to update the header status also when scrollTop is 642, 643, and so on
      this.headered = true;
      console.log(this.headered);///<-- this did trigger when scroll more than 640

      if(this.content) {
        // Update the content
        this.content.resize();
      }
    }else if(event.target.scrollTop <= 640 && this.headered){
      // If the scrollTop is lower or equal than 640 and the header is visible, we need to hide it (this prevent trying to update the header status also when scrollTop is 639, 638, and so on
      this.headered = false;

      if(this.content) {
        // Update the content
        this.content.resize();
      }
    } 
}