ionic2-滚动以触发

Question

I want to only show my ion-header when the page scroll to specific point

html

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

So it will be triggered by scrolling:

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

I did get the true in console but the header did not show up. I test it again by add a button call this function:

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

and the header did show and hide as aspected.

Why is scroll event cannot make header show? How can I resolve this?

Update01

I tried:

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

As you can see inside onPageScroll() I get reading and out of it I did not. I suspect it is related to @ViewChild(Content) content:Content; , that ionic2 suggest in their doc .

Answer 1

Just like you said, taking a look at Content - Ionic Docs I've found:

resize()

Tell the content to recalculate its dimensions. This should be called after dynamically adding headers, footers, or tabs.

So since you're getting an instance of the content by doing

@ViewChild(Content) content:Content;

Try with the following:

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

EDIT

Since onPageScroll is being called a lot of times and you only need to update the content when the scrollTop is higher than 640 and the header is not being shown, (or when the scrollTop is lower or equal than 640 and the header is being shown) let's change the code a little bit:

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