tencent.jquery.pix.component 1.0.6-6.beta1

package/components/list/list.js

@@ -0,0 +1,217 @@
+import { getEnv } from "../config";
+
+let $ = null;
+
+// 默认配置
+const DEFAULTS = {
+    itemHeight: 50,       // 单条数据高度
+    buffer: 3,            // 缓冲区预加载条数
+    data: [],              // 数据源
+    container: '',                // 容器元素
+    renderItem(data, index) {      // 元素首次渲染时的回调函数, 如果把updateItem设置为空，那么更新时则会兜底触发renderItem
+        return '<div class="virtual-item"></div>';
+    },
+    // 传入 $node, data, index
+    updateItem: null, // 元素更新时的回调函数
+    onscroll: null,   // 滚动事件回调函数
+};
+
+export function List(options = {}) {
+    $ = getEnv().$;
+
+    this.options = Object.assign({}, DEFAULTS, options);
+    // 标记是否有更新元素用的回调函数
+    this.hasUpdateItem = options.updateItem && (options.updateItem.constructor === Function) ? true : false;
+
+
+    this.init();
+}
+
+List.prototype.init = function () {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+
+    this.nodePool = [];            // DOM 节点池
+    this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
+
+    // 高度字符串转数字
+    if (options.itemHeight.constructor === String) {
+        // 如果是rem单位，则需要计算
+        if (options.itemHeight.indexOf('rem') > -1) {
+            let fonSize = parseFloat($(document.body).css("font-size").replace('px', ''));
+            let num = parseFloat(options.itemHeight.replace('rem', ''));
+            options.itemHeight = fonSize * num;
+        } else {
+            options.itemHeight = parseFloat(options.itemHeight);
+        }
+    }
+
+    // 设置滚动容器高度 = 数据总数 * 单条高度
+    const totalHeight = options.data.length * options.itemHeight;
+
+    $container.html(`
+        <div class="virtual-list-scroll" style="height: ${totalHeight}px">
+          <div class="virtual-list-viewport"></div>
+        </div>
+      `);
+
+    // 绑定滚动事件（节流处理）
+    $container.off().on('scroll', function () {
+        self.scrollTop = $(this).scrollTop();
+
+        window.requestAnimationFrame(() => {
+            self.updateVisibleItems();
+        });
+
+        if (options.onscroll && options.onscroll.constructor === Function) {
+            options.onscroll(this, self.scrollTop);
+        }
+    });
+
+    this.scrollTop = $container.scrollTop();  // 当前滚动位置
+
+    // 首次渲染
+    self.updateVisibleItems();
+}
+
+// force 强制更新渲染
+List.prototype.updateVisibleItems = function (force = false) {
+    const self = this;
+    const options = this.options;
+    const $container = $(options.container);
+
+    let startIndex = 0;   // 起始索引
+    let endIndex = 0;     // 结束索引
+
+    const viewportHeight = $container.height();
+    // 计算当前可见项范围（含缓冲区）
+    startIndex = Math.max(0, Math.floor(self.scrollTop / options.itemHeight) - options.buffer);
+    endIndex = Math.min(
+        options.data.length - 1,
+        Math.ceil((self.scrollTop + viewportHeight) / options.itemHeight) + options.buffer
+    );
+
+    // 生成当前可见项的 DOM
+    const $viewport = $container.find('.virtual-list-viewport');
+
+    /**方案1 */
+    const newActiveNodes = new Map();
+
+    // 阶段1：复用已有节点
+    for (let i = startIndex; i <= endIndex; i++) {
+        const $existingNode = this.activeNodes.get(i);
+        const top = i * options.itemHeight;
+        if ($existingNode) {
+            // 只有当位置不对应上才做位置有关的UI变更，否则top则为计算好了 不需要再次设置y值
+            newActiveNodes.set(i, $existingNode);
+            const index = parseInt($existingNode.attr('data-index'));
+            if (force === true || index !== i) {
+                // 直接更新位置和内容
+                $existingNode.css('transform', `translateY(${top}px)`);
+                $existingNode.attr('data-index', i)
+
+                self.updateRenderUI($existingNode, options.data[i], i);
+
+            }
+            this.activeNodes.delete(i);
+        } else {
+            // 从节点池获取或创建新节点
+            let nodePool = this.nodePool;
+            let $node = null;
+            if (nodePool.length === 0) {
+                $node = $(
+                    `<div class="virtual-item" 
+              style="position: absolute; transform:translateY(${top}px); height: ${options.itemHeight}px"
+              data-index="${i}">
+           ${options.renderItem(options.data[i], i)}
+         </div>`
+                );
+                $viewport.append($node);
+            } else {
+                $node = $(this.nodePool.pop())
+                $node.css('transform', `translateY(${top}px)`).attr('data-index', i);
+                self.updateRenderUI($node, options.data[i], i);
+            }
+            newActiveNodes.set(i, $node);
+        }
+    }
+
+    // 阶段2：回收不再使用的节点
+    this.activeNodes.forEach($node => {
+        $node.css('transform', `translateY(-9999px)`);// 移出可视区域
+        this.nodePool.push($node);
+    });
+    this.activeNodes = newActiveNodes;
+
+    /**方案2 */
+    // const $existingChildren = $viewport.children(); // 获取现有 DOM 元素集合
+    // const usedIndices = new Set(); // 记录当前需要保留的索引
+
+    // // 步骤 1：更新或保留现有元素
+    // if ($existingChildren.length > 0) {
+    //     for (let j = 0; j < $existingChildren.length; j++) {
+    //         const $el = $($existingChildren[j]);
+    //         const oldIndex = parseInt($el.data('data-index'));
+    //         if (oldIndex >= startIndex && oldIndex <= endIndex) {
+    //             // 仍在可视范围内 → 更新位置和内容
+    //             const newTop = oldIndex * options.itemHeight;
+    //             $el.css('top', `${newTop}px`);
+    //             usedIndices.add(oldIndex);
+    //         } else {
+    //             // 移出可视范围 → 从 DOM 中删除
+    //             $el.remove();
+    //         }
+    //     }
+    // }
+
+    // // 步骤 2：补充新增元素
+    // for (let i = startIndex; i <= endIndex; i++) {
+    //     if (!usedIndices.has(i)) {
+    //         // 需要新增的元素
+    //         const top = i * options.itemHeight;
+    //         const $element = $(
+    //             `<div class="virtual-item" 
+    //           style="position: absolute; top: ${top}px; height: ${options.itemHeight}px"
+    //           data-index="${i}">
+    //        ${options.renderItem(options.data[i], i)}
+    //      </div>`
+    //         );
+    //         // 插入到正确位置（按索引顺序）
+    //         let inserted = false;
+    //         for (let j = 0; j < $existingChildren.length; j++) {
+    //             const $el = $($existingChildren[j]);
+    //             const currentIndex = parseInt($el.data('data-index'));
+    //             if (currentIndex > i) {
+    //                 $element.insertBefore($el);
+    //                 inserted = true;
+    //                 break;
+    //             }
+    //         }
+
+    //         if (!inserted) {
+    //             $viewport.append($element);
+    //         }
+    //     }
+    // }
+
+}
+
+// 外部更新数据方法
+List.prototype.updateData = function (newData) {
+    const options = this.options;
+    options.data = newData;
+    const totalHeight = options.data.length * options.itemHeight
+    // 重新计算高度
+    $(this.options.container).children().height(`${totalHeight}px`);
+    this.updateVisibleItems(true); // 强制更新渲染
+};
+
+List.prototype.updateRenderUI = function ($node, data, index) {
+    const options = this.options;
+    if (this.hasUpdateItem === true) {
+        options.updateItem($node, data, index)
+    } else {
+        $node.html(options.renderItem(data, index));
+    }
+}