Question

我已经实现了一种只在向上滚动时显示按钮的方法：感觉上，我的实现方式需要进行许多计算，因为逻辑侦听每个滚动事件。也许有些书呆子比我有更好的方法。 :) 要求是：最初加载页面或向上滚动时，按钮应显示在UI中。向下滚动时，该按钮应隐藏。

我使用Angulars @HostListener(..)来监听滚动事件。

组件

  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];
    const currentScrollHeight = window.scrollY;
    console.log(currentScrollHeight);

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

HTML

  <button class="btn btn-success btn-circle btn-xl"
          [ngClass]="(showAddButton === true) ? 'scale-in' : 'scale-out'"
  </button>

为了完善CSS：

.scale-out {
  -webkit-animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-in {
  -webkit-animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

期待任何输入。：）

编辑：我创建了一个用于测试的Stackblitz

Stackblitz

Answer 1

您应该将滚动事件转换为Observable。然后，您可以使用export class HomePage { disablePin: boolean = false; disableIns: boolean = false; constructor() {} toggle(type): void { if (type === 'I') { this.disablePin = true; setTimeout(() => { this.disablePin = false; }, 5000); } if (type === 'P') { this.disableIns = true; setTimeout(() => { this.disableIns = false; }, 5000); } } }控制处理。

您可以添加一个主题，传递滚动信息，然后执行您的逻辑

debounceTime

或者您可以从事件创建Observable

  scroll = new Subject<number>();
  ngOnInit() {
    this.scroll
      .pipe(debounceTime(200))
      .subscribe((y) => this.dealWithScroll(window.scrollY));
  }
  ngOnDestroy() {
    this.scroll.complete();
  }
  @HostListener('window:scroll') watchScroll() {
    this.scroll.next(window.scrollY);
  }
  dealWithScroll(y: number) {}

如您所见，您可以直接访问窗口对象。同样，scroller: Subscription; ngOnInit() { this.scroller = fromEvent(window, 'scroll') .pipe(debounceTime(200)) .subscribe(() => this.dealWithScroll(window.scrollY)); } ngOnDestroy() { this.scroller.unsubscribe(); }似乎过多showAddButton === true应该足够好。不要忘记退订/完成可观察的项目。

Answer 2

我会添加一个小的缓冲区

这将使该应用程序的触摸灵敏度降低，并减少所需的计算。

export class AppComponent {
  public lastScrolledHeight: number = 0;
  public showAddButton: boolean = true;
  private buffer = 0

  @HostListener('window:scroll', ['$event']) onScroll(event) {
    const window = event.path[1];

    if (this.ignoredByBuffer()) {
      return;
    }

    const currentScrollHeight = window.scrollY;

    if (currentScrollHeight > this.lastScrolledHeight) {
      this.showAddButton = false;
      console.log('should NOT show button');
    } else {
      this.showAddButton = true;
      console.log('should show button');
    }
    this.lastScrolledHeight = currentScrollHeight;
  }

  private ignoredByBuffer(): boolean {
    if (this.buffer < 10) {
      this.buffer += 1;
      return true;
    }
    this.buffer = 0;
    return false;
  }
}

向下滚动的角度隐藏按钮/向上滚动显示

组件

HTML

编辑：我创建了一个用于测试的Stackblitz

2 个答案: