Angular虚拟滚动/无限滚动 - od-virtualscroll

Angular虚拟滚动/无限滚动 - od-virtualscroll
插件名称 od-virtualscroll
发布时间 2020年10月16日
插件作者 dinony

Angular中基于可观察的虚拟滚动实现。

特征:

  • 高效的虚拟滚动/无限滚动
  • 支持调整大小
  • 最佳更新
  • 请求固定的单元格大小–调整每行的单元格数量
  • 每行请求一定数量的单元格–调整单元格宽度
  • 去抖动滚动/调整大小
  • 允许您订阅关键组件可观察对象的高级API
  • 设定滚动位置
  • 可自定义的相等性检查(需要标识单元格)
  • 支持提前编译和摇树
  • 很多代码示例
  • 随附FESM5和FESM15
  • 同时装运ES5 / UMD,ES5 / ES2015和E2015 / ES2015出口({{target}}/{{module}}

安装:

npm i -S od-virtualscroll

用法

导入模块并指定单元格和容器的样式(传统布局或flexbox / …您选择)。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {VirtualScrollModule} from 'od-virtualscroll';
import {AppComponent} from './app.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    VirtualScrollModule
  ]
})
export class AppModule {}

// app.component.ts
import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {IVirtualScrollOptions} from 'od-virtualscroll';

@Component({
  selector: 'app-shell',
  styles: [`...`],                      // <-- Style your cell and container
  template: `
    <od-virtualscroll [vsData]="data$" [vsOptions]="options$">
      <ng-template let-item let-row="row" let-column="column">
        <span>Row: {{row}}</span><br>
        <span>Column: {{column}}</span>
        {{item}}
      </ng-template>
    </od-virtualscroll>`
})
export class AppComponent {
  data$: Observable<any[]> = ... ;                      // <-- Define data
  options$: Observable<IVirtualScrollOptions> = ... ;   // <-- Define options
}