Question

我想在angular2中实现无限滚动

自动删除视口外的DOM。
使用requestAnimationFrame代替onscroll。

我注意到上面是使用Mithriljs实现的，可以在下面的链接中找到。我对如何使用requestAnimationFrame并在angular2中构建一个名为ScrollListener的类感到困惑。请提出建议？

https://github.com/flarum/core/blob/master/js/lib/utils/ScrollListener.js

https://github.com/flarum/core/blob/master/js/forum/src/components/PostStream.js

PS：抱歉我的英文。我不是母语为英语的人。

Answer 1

不确定您需要哪些信息

Here就是一个例子

class RafQueue {
  currentFrameId: number;
  constructor(public callback: Function, public frames: number) { this._raf(); }
  private _raf() {
    this.currentFrameId = DOM.requestAnimationFrame(timestamp => this._nextFrame(timestamp));
  }
  private _nextFrame(timestamp: number) {
    this.frames--;
    if (this.frames > 0) {
      this._raf();
    } else {
      this.callback(timestamp);
    }
  }
  cancel() {
    DOM.cancelAnimationFrame(this.currentFrameId);
    this.currentFrameId = null;
  }
}

但我最近遇到https://github.com/angular/angular/issues/6904（未检查，因为它再次正常工作）

Answer 2

我找到了解决方案：

将其添加到index.html！

<script src="https://npmcdn.com/angular2@2.0.0-beta.17/es6/dev/src/testing/shims_for_IE.js"></script>

之后一切正常！

Answer 3

您可以使用以下代码调用RequestAnimationFrame（RAf）：

    ngAfterViewInit() {
    console.log('element available::' + this.desiredElmentAvailable);
    if(this.desiredElmentAvailable)
    window.requestAnimationFrame( () => this.onRenderComplete.emit(true));

    }
  }

此处this.desiredElmentAvailable是视图中存在的domElement。当渲染完成时，会发出一个事件并执行您想要做的任何事情。

在angular2中使用requestAnimationFrame

3 个答案: