Javascript 如何在ionic3中滚动隐藏内容的页眉和页脚

现在，在滚动页面时隐藏和显示页眉和页脚是非常常见的，如果我们有以下信息，这里是解决方案-

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.1.0
    npm  : 5.3.0 
    OS   : Linux 4.4

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.1.0
    npm  : 5.3.0 
    OS   : Linux 4.4

在提供程序中创建一个名为scroll的文件，并将文件添加为

scroll hide.ts

，作为-

import { Content } from 'ionic-angular';
import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';


@Directive({
    selector: '[scrollHide]'
})
export class ScrollHideDirective {

    @Input('scrollHide') config: ScrollHideConfig;
    @Input('scrollContent') scrollContent: Content;

    contentHeight: number;
    scrollHeight: number;
    lastScrollPosition: number;
    lastValue: number = 0;

    constructor(private element: ElementRef, private renderer: Renderer2) {
    }

    ngOnChanges(changes: SimpleChanges) {
        if (this.scrollContent && this.config) {
            this.scrollContent.ionScrollStart.subscribe((ev) => {
                this.contentHeight = this.scrollContent.getScrollElement().offsetHeight;
                this.scrollHeight = this.scrollContent.getScrollElement().scrollHeight;
                if (this.config.maxValue === undefined) {
                    this.config.maxValue = this.element.nativeElement.offsetHeight;
                }
                this.lastScrollPosition = ev.scrollTop;
            });
            this.scrollContent.ionScroll.subscribe((ev) => this.adjustElementOnScroll(ev));
            this.scrollContent.ionScrollEnd.subscribe((ev) => this.adjustElementOnScroll(ev));
        }
    }

    private adjustElementOnScroll(ev) {
        if (ev) {
            ev.domWrite(() => {
                let scrollTop: number = ev.scrollTop > 0 ? ev.scrollTop : 0;
                let scrolldiff: number = scrollTop - this.lastScrollPosition;
                this.lastScrollPosition = scrollTop;
                let newValue = this.lastValue + scrolldiff;
                newValue = Math.max(0, Math.min(newValue, this.config.maxValue));
                this.renderer.setStyle(this.element.nativeElement, this.config.cssProperty, `-${newValue}px`);
                this.lastValue = newValue;
            });
        }
    }
}
export interface ScrollHideConfig {
    cssProperty: string;
    maxValue: number;
}

import { Content } from 'ionic-angular';
import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';


@Directive({
    selector: '[scrollHide]'
})
export class ScrollHideDirective {

    @Input('scrollHide') config: ScrollHideConfig;
    @Input('scrollContent') scrollContent: Content;

    contentHeight: number;
    scrollHeight: number;
    lastScrollPosition: number;
    lastValue: number = 0;

    constructor(private element: ElementRef, private renderer: Renderer2) {
    }

    ngOnChanges(changes: SimpleChanges) {
        if (this.scrollContent && this.config) {
            this.scrollContent.ionScrollStart.subscribe((ev) => {
                this.contentHeight = this.scrollContent.getScrollElement().offsetHeight;
                this.scrollHeight = this.scrollContent.getScrollElement().scrollHeight;
                if (this.config.maxValue === undefined) {
                    this.config.maxValue = this.element.nativeElement.offsetHeight;
                }
                this.lastScrollPosition = ev.scrollTop;
            });
            this.scrollContent.ionScroll.subscribe((ev) => this.adjustElementOnScroll(ev));
            this.scrollContent.ionScrollEnd.subscribe((ev) => this.adjustElementOnScroll(ev));
        }
    }

    private adjustElementOnScroll(ev) {
        if (ev) {
            ev.domWrite(() => {
                let scrollTop: number = ev.scrollTop > 0 ? ev.scrollTop : 0;
                let scrolldiff: number = scrollTop - this.lastScrollPosition;
                this.lastScrollPosition = scrollTop;
                let newValue = this.lastValue + scrolldiff;
                newValue = Math.max(0, Math.min(newValue, this.config.maxValue));
                this.renderer.setStyle(this.element.nativeElement, this.config.cssProperty, `-${newValue}px`);
                this.lastValue = newValue;
            });
        }
    }
}
export interface ScrollHideConfig {
    cssProperty: string;
    maxValue: number;
}

现在，我们需要在您的应用程序模块内

app.module.ts-

加-

在页面顶部，现在是将@NgModule部分包括为-

@NgModule({
  declarations: [
    ...
    ScrollHideDirective
  ],
  imports: [
    ...
    IonicModule.forRoot(MyApp, {})
  ],

providers: [
   ...
  ]
})
export class AppModule { }

@NgModule({
  declarations: [
    ...
    ScrollHideDirective
  ],
  imports: [
    ...
    IonicModule.forRoot(MyApp, {})
  ],

providers: [
   ...
  ]
})
export class AppModule { }

移动到要隐藏显示页脚和页眉的页面

（home.ts）

，添加以下内容-

import { Component} from '@angular/core';
import { ScrollHideConfig } from '../../directives/scroll-hide';

@Component({
  selector: 'page-explore',
  templateUrl: 'explore.html'
})
export class ExplorePage {

  footerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-bottom', maxValue: undefined };
  headerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-top', maxValue: 44 };

  ...

}

import { Component} from '@angular/core';
import { ScrollHideConfig } from '../../directives/scroll-hide';

@Component({
  selector: 'page-explore',
  templateUrl: 'explore.html'
})
export class ExplorePage {

  footerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-bottom', maxValue: undefined };
  headerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-top', maxValue: 44 };

  ...

}

现在我们必须在视图页面

（home.html）

...
...
...

这一切都是为了完成我们的任务。

---

祝你有美好的一天

现在，在滚动页面时隐藏和显示页眉和页脚是非常常见的，如果我们有以下信息，这里是解决方案-

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.1.0
    npm  : 5.3.0 
    OS   : Linux 4.4

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.1.0
    npm  : 5.3.0 
    OS   : Linux 4.4

在提供程序中创建一个名为scroll的文件，并将文件添加为

scroll hide.ts

，作为-

import { Content } from 'ionic-angular';
import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';


@Directive({
    selector: '[scrollHide]'
})
export class ScrollHideDirective {

    @Input('scrollHide') config: ScrollHideConfig;
    @Input('scrollContent') scrollContent: Content;

    contentHeight: number;
    scrollHeight: number;
    lastScrollPosition: number;
    lastValue: number = 0;

    constructor(private element: ElementRef, private renderer: Renderer2) {
    }

    ngOnChanges(changes: SimpleChanges) {
        if (this.scrollContent && this.config) {
            this.scrollContent.ionScrollStart.subscribe((ev) => {
                this.contentHeight = this.scrollContent.getScrollElement().offsetHeight;
                this.scrollHeight = this.scrollContent.getScrollElement().scrollHeight;
                if (this.config.maxValue === undefined) {
                    this.config.maxValue = this.element.nativeElement.offsetHeight;
                }
                this.lastScrollPosition = ev.scrollTop;
            });
            this.scrollContent.ionScroll.subscribe((ev) => this.adjustElementOnScroll(ev));
            this.scrollContent.ionScrollEnd.subscribe((ev) => this.adjustElementOnScroll(ev));
        }
    }

    private adjustElementOnScroll(ev) {
        if (ev) {
            ev.domWrite(() => {
                let scrollTop: number = ev.scrollTop > 0 ? ev.scrollTop : 0;
                let scrolldiff: number = scrollTop - this.lastScrollPosition;
                this.lastScrollPosition = scrollTop;
                let newValue = this.lastValue + scrolldiff;
                newValue = Math.max(0, Math.min(newValue, this.config.maxValue));
                this.renderer.setStyle(this.element.nativeElement, this.config.cssProperty, `-${newValue}px`);
                this.lastValue = newValue;
            });
        }
    }
}
export interface ScrollHideConfig {
    cssProperty: string;
    maxValue: number;
}

import { Content } from 'ionic-angular';
import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';


@Directive({
    selector: '[scrollHide]'
})
export class ScrollHideDirective {

    @Input('scrollHide') config: ScrollHideConfig;
    @Input('scrollContent') scrollContent: Content;

    contentHeight: number;
    scrollHeight: number;
    lastScrollPosition: number;
    lastValue: number = 0;

    constructor(private element: ElementRef, private renderer: Renderer2) {
    }

    ngOnChanges(changes: SimpleChanges) {
        if (this.scrollContent && this.config) {
            this.scrollContent.ionScrollStart.subscribe((ev) => {
                this.contentHeight = this.scrollContent.getScrollElement().offsetHeight;
                this.scrollHeight = this.scrollContent.getScrollElement().scrollHeight;
                if (this.config.maxValue === undefined) {
                    this.config.maxValue = this.element.nativeElement.offsetHeight;
                }
                this.lastScrollPosition = ev.scrollTop;
            });
            this.scrollContent.ionScroll.subscribe((ev) => this.adjustElementOnScroll(ev));
            this.scrollContent.ionScrollEnd.subscribe((ev) => this.adjustElementOnScroll(ev));
        }
    }

    private adjustElementOnScroll(ev) {
        if (ev) {
            ev.domWrite(() => {
                let scrollTop: number = ev.scrollTop > 0 ? ev.scrollTop : 0;
                let scrolldiff: number = scrollTop - this.lastScrollPosition;
                this.lastScrollPosition = scrollTop;
                let newValue = this.lastValue + scrolldiff;
                newValue = Math.max(0, Math.min(newValue, this.config.maxValue));
                this.renderer.setStyle(this.element.nativeElement, this.config.cssProperty, `-${newValue}px`);
                this.lastValue = newValue;
            });
        }
    }
}
export interface ScrollHideConfig {
    cssProperty: string;
    maxValue: number;
}

现在，我们需要在您的应用程序模块内

app.module.ts-

加-

在页面顶部，现在是将@NgModule部分包括为-

@NgModule({
  declarations: [
    ...
    ScrollHideDirective
  ],
  imports: [
    ...
    IonicModule.forRoot(MyApp, {})
  ],

providers: [
   ...
  ]
})
export class AppModule { }

@NgModule({
  declarations: [
    ...
    ScrollHideDirective
  ],
  imports: [
    ...
    IonicModule.forRoot(MyApp, {})
  ],

providers: [
   ...
  ]
})
export class AppModule { }

移动到要隐藏显示页脚和页眉的页面

（home.ts）

，添加以下内容-

import { Component} from '@angular/core';
import { ScrollHideConfig } from '../../directives/scroll-hide';

@Component({
  selector: 'page-explore',
  templateUrl: 'explore.html'
})
export class ExplorePage {

  footerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-bottom', maxValue: undefined };
  headerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-top', maxValue: 44 };

  ...

}

import { Component} from '@angular/core';
import { ScrollHideConfig } from '../../directives/scroll-hide';

@Component({
  selector: 'page-explore',
  templateUrl: 'explore.html'
})
export class ExplorePage {

  footerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-bottom', maxValue: undefined };
  headerScrollConfig: ScrollHideConfig = { cssProperty: 'margin-top', maxValue: 44 };

  ...

}

现在我们必须在视图页面

（home.html）

...
...
...

这一切都是为了完成我们的任务。 祝你有美好的一天！！！

---

参考解决方案可用。@@

我投票将此问题作为主题外的问题关闭，因为这不是一个问题，而是作为问题发布的问题的解决方案。问题可以在堆栈溢出时自行回答，但必须遵循问题/答案格式。请更改您的帖子，以便您提出上述主题问题。然后，您可以将此答案发布到答案框中。如果您能帮助我，我不知道如何更好地发布此答案。您可以使用完整的问题文本作为答案，这样您就可以将其复制并粘贴到答案框中，并添加来自当前答案的链接。棘手的部分是发布一个适合答案的好问题。如果你自己遇到了这个问题，你可以询问如何解决，并展示失败的方法。谢谢你的帮助！