📦 1.2.0 💪 为元素增加了默认的index，使之渲染顺序更加稳定

Author: Gaubee

README.md

@@ -133,7 +133,7 @@
 
 ```html
 <scroll-viewport>
-  <fixed-size-virtual-list
+  <fixed-size-virtual-list-s1
     id="l"
     item-size="200"
     item-count="1000000"
@@ -157,7 +157,7 @@
         <div class="slider-item">rethink, this is grid.</div>
       </div>
     </virtual-list-custom-item>
-  </fixed-size-virtual-list>
+  </fixed-size-virtual-list-s1>
 </scroll-viewport>
 ```
 

demo.html

@@ -116,7 +116,7 @@
   }
 </script>
 <scroll-viewport>
-  <fixed-size-virtual-list
+  <fixed-size-virtual-list-s1
     id="l"
     item-size="200"
     item-count="1000000"
@@ -140,5 +140,5 @@
         <div class="slider-item">rethink, this is grid.</div>
       </div>
     </virtual-list-custom-item>
-  </fixed-size-virtual-list>
+  </fixed-size-virtual-list-s1>
 </scroll-viewport>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bfchain/virtual-scroll",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/virtual-scroll.es.js",
   "exports": {
     ".": "./dist/virtual-scroll.es.js"

src/common-fixed-size-virtual-list-builder.ts

@@ -488,6 +488,7 @@ export abstract class CommonFixedSizeListBuilder<
         Number(index - viewStartIndex) * this.itemSize -
         koordinatenverschiebung;
       node.virtualVisible = true;
+      node.virtualIndex = Number(index - viewStartIndex);
     }
 
     /// 移除剩余的没有被重复利用的元素；（使用挪动到视图之外来替代移除，避免过度抖动）

src/virtual-list-common-item.ts

@@ -8,6 +8,7 @@ export abstract class VirtualListCommonItemElement extends LitElement {
       top: 0;
       transform: var(--virtual-transform);
       display: var(--virtual-display);
+      z-index: var(--virtual-index);
       will-change: transform;
       --virtual-display: block;
       width: 100%;
@@ -30,6 +31,14 @@ export abstract class VirtualListCommonItemElement extends LitElement {
     this._virtualVisible = value;
     this._updateStyles();
   }
+  private _virtualIndex = 0;
+  public get virtualIndex(): number {
+    return this._virtualIndex;
+  }
+  public set virtualIndex(value: number) {
+    this._virtualIndex = value;
+    this._updateStyles();
+  }
   private _updating = false;
   protected _updateStyles() {
     if (this._updating) {
@@ -44,7 +53,7 @@ export abstract class VirtualListCommonItemElement extends LitElement {
   protected _getHostCssText() {
     let cssText: string;
     if (this._virtualVisible) {
-      cssText = `--virtual-transform:translateY(${this._virtualTransformTop}px)`;
+      cssText = `--virtual-transform:translateY(${this._virtualTransformTop}px);--virtual-index:${this._virtualIndex}`;
     } else {
       cssText = `--virtual-display:none`;
     }