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

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

activePage

SendInvitationsMode.SendToAllAndSaveCopy的代码行，因为当将指令添加到多个组件/页面时，它没有起作用，而且我引用的原因'可能是DOM中多个标题的原因'...我是对改进此代码的任何建议持开放态度。

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

可收缩标题

2 个答案: