1 Star 1 Fork 0

清晨de阳光 / ng-virtual-scroll-viewport

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

virtual-scroll-viewport 虚拟滚动

在线示例 | 在 stackblitz 中打开

API

<virtual-scroll-viewport #viewport [list]="list" [itemSize]="30" style="height: 300px;">
  <ul>
    <li class="item" *ngFor="let item of viewport.vList" style="height: 30px;">{{item}}</li>
  </ul>
</virtual-scroll-viewport>
参数 说明 类型 默认值
[list] 列表数据源 any[]
[itemSize] 行高 number
[maxBuffer] 最大缓冲尺寸 number 默认为视口的高度
[minBuffer] 最小缓冲尺寸, 滚动时小于该值将更新视图 number 默认为视口高度的一半
[disabled] 是否禁用虚拟滚动 boolean false
(update) 视图更新事件 EventEmitter

原理

<virtual-scroll-viewport (scroll)="updateVList()">
  <div class="virtual-scroll-content-wrapper" #wrapper style="margin-top: {{marginTop}}px;">
    <ng-content></ng-content>
  </div>
  <div class="virtual-scroll-content-spacer" [style.height.px]="totalHeight"></div>
</virtual-scroll-viewport>
  • viewport 滚动视口(固定高度)
  • contentwrapper 内容包裹层
  • content-spacer 内容占位垫片 = itemSize * list.length
  • list 原始数据
  • vList 在视口展示的数据
  • itemSize 行高(必须)
  • maxBuffer 最大缓冲尺寸
  • minBuffer 最小缓冲尺寸, 滚动时小于该值将更新视图 vList
// 滚动事件
updateVList() {
  // 标识是否需要更新
  needUpdate = false;
  if (内容向上滚动) {
    needUpdate = bottomBuffer(底部缓冲区) < minBuffer;
  } else {
    needUpdate = topBuffer(顶部缓冲区) < minBuffer;
  }
  if (!needUpdate) return;

  // 切割出需要展示的内容
  start = Math.max(scrollTop - maxBuffer, 0) / this.itemSize;
  end = (scrollTop + viewportClientHeight + maxBuffer) / this.itemSize;
  this.vList = this.list.slice(start, end);
  // 设置视口内容偏移
  this.marginTop = start * this.itemSize;
}

空文件

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/xujz520/ng-virtual-scroll-viewport.git
git@gitee.com:xujz520/ng-virtual-scroll-viewport.git
xujz520
ng-virtual-scroll-viewport
ng-virtual-scroll-viewport
main

搜索帮助