可收缩标头

Question

我有一个示例指令，当用户向上滚动时，标题会缩小...但是当向下滚动时，标题直到到达顶部才会出现......如何在向下滚动一段距离时改进代码，标题应该出现。

.ts:

 import { Directive, ElementRef, Renderer } from '@angular/core';
  @Directive({
    selector: '[header-shrink]',
    host: {
      '(ionScroll)': 'onContentScroll($event)'
    }
  })
  export class HeaderShrink {
    header: any;
    headerHeight: any;
    translateAmt: any;

   constructor(public element: ElementRef, public renderer: Renderer) { }

   ngAfterViewInit() {

    this.header = document.getElementsByClassName("shrinkable")[0];
    this.headerHeight = this.header.clientHeight;
   }

  onContentScroll(ev) {
   ev.domWrite(() => {
    this.updateHeader(ev);
    });
  }

 updateHeader(ev) {

   if (ev.scrollTop >= 0) {
    this.translateAmt = -ev.scrollTop / 4;

    } else {
      this.translateAmt =ev.scrollTop / 4;
  }

  this.renderer.setElementStyle(this.header, 'webkitTransform',   'translate3d(0,' + this.translateAmt + 'px,0)');
 }
}

.html:

 <ion-header class="shrinkable">
   <ion-navbar>
     <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
  <ion-title>
    Jobs
  </ion-title>
  <ion-buttons end>
     <button ion-button end icon-only (click)="presentPopover($event)">
     <ion-icon name="more"></ion-icon>
     </button>
  </ion-buttons>

该指令并不完美..另外，当标题缩小时如何添加渐变项目

Answer 1

        import { Directive, ElementRef, Renderer } from '@angular/core';
      @Directive({
        selector: '[header-shrink]',
        host: {
          '(ionScroll)': 'onContentScroll($event)'
        }
      })
      export class HeaderShrink {
        header: any;
        headerHeight: any;
        translateAmt: any;
        lastScroll:number=0;
       constructor(public element: ElementRef, public renderer: Renderer) { }

       ngAfterViewInit() {

        this.header = document.getElementsByClassName("shrinkable")[0];
        this.headerHeight = this.header.clientHeight;
       }

      onContentScroll(ev) {
       ev.domWrite(() => {
        this.updateHeader(ev);
        });
      }

     updateHeader(ev) {

       if (ev.scrollTop >this.lastScrollTop) {
        this.translateAmt = -150;

        } else {
          this.translateAmt = 0;
      }

      this.renderer.setElementStyle(this.header, 'webkitTransform',   'translate3d(0,' + this.translateAmt + 'px,0)');
this.lastScrollTop = ev.scrollTop;


     }
    }

Answer 2

我找到了更好的解决方案：

import { Directive, ElementRef, Renderer } from '@angular/core';
import { NavController } from 'ionic-angular';

@Directive({
  selector: '[header-shrink]',
  host: {
   '(ionScroll)': 'onContentScroll($event)'
  }
})
export class HeaderShrink {
  header: any;
  headerHeight: any;
  translateAmt: any;
  scrollPosition: number = 0;
  lastScrollTop: number = 0;

  activePage: any;

    constructor(public navCtrl: NavController, public element: ElementRef, public renderer: Renderer) { }

    ngAfterViewInit() {

     this.activePage = this.navCtrl.getActive()._cmp;  // get current active page
      // ion-header classname
     this.header = this.activePage._nativeElement.getElementsByClassName("shrinkable")[0];

     // the height of the header
     this.headerHeight = this.header.clientHeight;
   }

   onContentScroll(ev) {
      ev.domWrite(() => {
          this.updateHeader(ev);
      });   
   }

   updateHeader(ev) {

     this.scrollPosition = ev.scrollTop;

     if (this.scrollPosition > this.lastScrollTop && this.scrollPosition >= 25) {
     // scrolling down
     this.renderer.setElementStyle(this.header, 'transition', 'all 0.3s linear');
     this.renderer.setElementStyle(this.header, 'transform', 'translateY(-' + this.headerHeight + 'px)');
     } else {
    // scrolling up
     this.renderer.setElementStyle(this.header, 'transform', 'translateY(0px)');
     }

    // reset
    this.lastScrollTop = this.scrollPosition;
   }
}

activePage 的代码行，因为在将指令添加到多个组件/页面时，它不起作用，我引用“可能是因为 DOM 中的多个标题”的原因......我愿意有关改进此代码的任何建议。

此答案来自：https://forum.ionicframework.com/t/shrinkable-header/78386/7