tencent.jquery.pix.component 1.0.64 → 1.0.66-beta1

package/components/waterfall/waterfall.js

@@ -17,6 +17,7 @@ const DEFAULTS = {
     renderItem(data, index) {      // 元素首次渲染时的回调函数, 如果把updateItem设置为空，那么更新时则会兜底触发renderItem
         return '<div class="waterfall-item"></div>';
     },
+    scrollDom: null, // 滚动元素,如果传入了滚动元素，那么用来计算的窗口高度就以滚动元素的高度为准
     // 传入 $node, data, index
     updateItem: null, // 元素更新时的回调函数
     onscroll: null,   // 滚动事件回调函数
@@ -42,6 +43,8 @@ export function Waterfall(optionsInput = {}) {
 
     this.$loadingNode = null;
 
+    this.isShowLoading = false;  // 是否展示loading
+
 
     // 间隔字符串转数字
     if (options.columnGap.constructor === String) {
@@ -125,6 +128,7 @@ Waterfall.prototype.init = function () {
     const self = this;
     const options = this.options;
     const $container = $(options.container);
+    const $scrollDom = options.scrollDom ? $(options.scrollDom) : $container;
 
     this.nodePool = [];            // DOM 节点池
     this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
@@ -140,6 +144,7 @@ Waterfall.prototype.init = function () {
 
 
     // 如果有定义loading函数  那么创建一个loading节点元素
+    console.log('options.createLoading', options.createLoading)
     if (options.createLoading) {
         this.$loadingNode = $(
             `<div class="waterfall-loading" style="transform: translate(0px, -99999px)"></div>`
@@ -150,7 +155,7 @@ Waterfall.prototype.init = function () {
     }
 
     // 绑定滚动事件（节流处理）
-    $container.off().on('scroll', function () {
+    $scrollDom.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
 
         window.requestAnimationFrame(() => {
@@ -162,7 +167,7 @@ Waterfall.prototype.init = function () {
         }
     });
 
-    this.scrollTop = $container.scrollTop();  // 当前滚动位置
+    this.scrollTop = $scrollDom.scrollTop();  // 当前滚动位置
 
     // 首次渲染
     self.updateVisibleItems();
@@ -173,11 +178,17 @@ Waterfall.prototype.init = function () {
 Waterfall.prototype.updateVisibleItems = function (force = false) {
     const self = this;
     const options = this.options;
-    const $container = $(options.container);
+    let h = 0;
+    if (options.scrollDom) {
+        h = $(options.scrollDom).height();
+    } else {
+        h = $(options.container).height();
+    }
 
     const startTop = self.scrollTop; // 当前滚动位置
-    const endTop = startTop + $container.height();
+    const endTop = startTop + h;
     // console.log('startTop', startTop)
+    console.log('endTop', endTop)
 
     // 进行可见区域的渲染更新
     this.updateCardsInView({
@@ -228,13 +239,13 @@ Waterfall.prototype.appendCard = function (data, dataId, { top, left }) {
 }
 
 // 获取指定高度下的卡片索引
-Waterfall.prototype.updateCardsInView = function ({ start, end, force = false }) {
+Waterfall.prototype.updateCardsInView = async function ({ start, end, force = false }) {
     const options = this.options;
     const minHeight = this.getMinHeight();
     const endBuffer = end + options.bufferHeight;
     if (minHeight < endBuffer) {
         // 如果不够 进行补建
-        this.createCards({ end: endBuffer });
+        await this.createCards({ end: endBuffer });
     }
 
     const startNum = start - options.bufferHeight;
@@ -400,123 +411,125 @@ Waterfall.prototype.getMinHeightColumn = function () {
 }
 
 // 创建卡片
-Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
+Waterfall.prototype.createCards = function ({ end, dataId = -1 }, callback) {
     const self = this;
     const options = this.options;
-    const $container = $(options.container);
 
-    // 新方案：获取下一个未渲染的数据ID
-    let nextDataId = null;
-    for (let [dataId, dataInfo] of this.dataIdMap) {
-        if (!this.renderedDataIds.has(dataId)) {
-            nextDataId = dataId;
-            break;
+    return new Promise((resolve) => {
+        // 新方案：获取下一个未渲染的数据ID
+        let nextDataId = null;
+        for (let [dataId, dataInfo] of this.dataIdMap) {
+            if (!this.renderedDataIds.has(dataId)) {
+                nextDataId = dataId;
+                break;
+            }
         }
-    }
 
 
-    // 如果没有更多数据需要渲染
-    if (nextDataId === null) {
-        const maxHeight = this.getMaxHeight();
-        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
-        return;
-    }
-
-    const dataInfo = this.dataIdMap.get(nextDataId);
-    if (!dataInfo || !dataInfo.data) {
-        console.warn('Waterfall: Invalid data for dataId', nextDataId);
-        return;
-    }
+        // 如果没有更多数据需要渲染
+        if (nextDataId === null) {
+            this.setScrollHeight();
+            return resolve();
+        }
 
-    if (this.renderIndex >= options.data.length) {
-        const maxHeight = this.getMaxHeight();
-        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
-        return
-    }
+        const dataInfo = this.dataIdMap.get(nextDataId);
+        if (!dataInfo || !dataInfo.data) {
+            console.warn('Waterfall: Invalid data for dataId', nextDataId);
+            return resolve();
+        }
 
-    const data = options.data[nextDataId];
+        if (this.renderIndex >= options.data.length) {
+            this.setScrollHeight();
+            return resolve();
+        }
 
-    let column = this.getMinHeightColumn();
-    if (column === null) {
-        column = this.columnItems[0];
-    }
+        const data = options.data[nextDataId];
 
-    const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
-    const position = { top, left: column.left };
-    const row = createDefaultRow(position);
+        let column = this.getMinHeightColumn();
+        if (column === null) {
+            column = this.columnItems[0];
+        }
 
-    this.renderIndex += 1;
+        const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
+        const position = { top, left: column.left };
+        const row = createDefaultRow(position);
 
-    let specialNode = false;
+        this.renderIndex += 1;
 
-    // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
-    if (options.shouldOccupySpace) {
-        specialNode = options.shouldOccupySpace(data) || false;
-    }
+        let specialNode = false;
 
-    // 添加卡片，使用dataId作为唯一标识
-    let $card = null;
-    if (this.nodePool.length === 0 || specialNode === true) {
-        $card = this.appendCard(data, nextDataId, position);
-    } else {
-        const $tmp = getNodePoolPop(this.nodePool, this.activeNodes);
-        if ($tmp) {
-            $card = $tmp;
-            $card.css({
-                'transform': `translate(${row.left}px,${row.top}px)`,
-            }).attr('data-index', nextDataId);
-            this.updateRenderUI($card, data, nextDataId);
-        } else {
-            $card = this.appendCard(data, nextDataId, position);
+        // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+        if (options.shouldOccupySpace) {
+            specialNode = options.shouldOccupySpace(data) || false;
         }
 
-    }
-
-    row.$node = $card;
-    row.dataId = nextDataId; // 使用dataId替代renderIndex
-    if (dataId !== -1) {
-        row.dataId = dataId;
-    }
+        // 添加卡片，使用dataId作为唯一标识
+        let $card = null;
+        if (this.nodePool.length === 0 || specialNode === true) {
+            $card = this.appendCard(data, nextDataId, position);
+        } else {
+            const $tmp = getNodePoolPop(this.nodePool, this.activeNodes);
+            if ($tmp) {
+                $card = $tmp;
+                $card.css({
+                    'transform': `translate(${row.left}px,${row.top}px)`,
+                }).attr('data-index', nextDataId);
+                this.updateRenderUI($card, data, nextDataId);
+            } else {
+                $card = this.appendCard(data, nextDataId, position);
+            }
 
-    // 记录布局信息
-    // dataInfo.layoutInfo = {
-    //     //columnIndex: this.columnItems.indexOf(column),
-    //     //position: position,
-    //     // row: row
-    // };
+        }
 
+        row.$node = $card;
+        row.dataId = nextDataId; // 使用dataId替代renderIndex
+        if (dataId !== -1) {
+            row.dataId = dataId;
+        }
 
+        if (specialNode === false) {
+            // 把新增的卡片放进 activeNodes 当成活跃节点元素，那么是 可以动态使用的
+            this.activeNodes.set(nextDataId, $card);
 
+            this.allReadyNodes.set(nextDataId, $card);
+        } else {
+            // 如果是特殊的，这里不要记录了 
+            this.allReadyNodes.set(nextDataId, null);
+        }
 
-    if (specialNode === false) {
-        // 把新增的卡片放进 activeNodes 当成活跃节点元素，那么是 可以动态使用的
-        this.activeNodes.set(nextDataId, $card);
+        this.renderedDataIds.add(nextDataId);
 
-        this.allReadyNodes.set(nextDataId, $card);
-    } else {
-        // 如果是特殊的，这里不要记录了 
-        this.allReadyNodes.set(nextDataId, null);
-    }
+        setTimeout(() => {
+            window.requestAnimationFrame(() => {
+                // 更新列的底部距离
+                column.bottom = top + $card.height();
+                console.log('column.bottom', column.bottom, $card.height());
+                column.children.push(row);
+                row.bottom = column.bottom;
 
-    this.renderedDataIds.add(nextDataId);
+                // 检查是否需要继续创建卡片
+                const minHeight = this.getMinHeight();
+                const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
 
-    // 更新列的底部距离
-    column.bottom = top + $card.height();
-    column.children.push(row);
-    row.bottom = column.bottom;
+                if (hasMoreData && (minHeight < end)) {
 
-    // 检查是否需要继续创建卡片
-    const minHeight = this.getMinHeight();
-    const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
+                    this.createCards({ end }, () => {
+                        resolve();
+                        if (callback) {
+                            callback();
+                        }
+                    });
+                } else {
+                    this.setScrollHeight();
+                    resolve();
+                    if (callback) {
+                        callback();
+                    }
+                }
+            });
+        }, 42);
+    });
 
-    if (hasMoreData && (minHeight < end)) {
-        window.requestAnimationFrame(() => {
-            this.createCards({ end });
-        });
-    } else {
-        const maxHeight = this.getMaxHeight();
-        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
-    }
 }
 
 
@@ -559,7 +572,7 @@ Waterfall.prototype.updateRenderUI = function ($node, data, dataId) {
 
 
 
-Waterfall.prototype.updateData = function (newData) {
+Waterfall.prototype.updateData = async function (newData) {
     const options = this.options;
     options.data = newData;
 
@@ -569,23 +582,45 @@ Waterfall.prototype.updateData = function (newData) {
     //this.nextDataId = 0;
 
     // 为每个数据项分配唯一ID
-    options.data.forEach((item, index) => {
-        const dataId = index; // this.nextDataId++;
-        if (!this.allReadyNodes.has(dataId)) {
-            this.dataIdMap.set(dataId, {
-                data: true,// item,
-                originalIndex: index,
-                layoutInfo: null // 将在布局时填充
-            });
-            // 如果没有准备好这个数据，这里要创建一个占位节点
-            this.createCards({ end: 0, dataId });
+    let bool = true
+    let count = options.data.length - 1;
+    let index = 0;
+
+    while (bool) {
+        if (index > count) {
+            bool = false
+            this.updateVisibleItems(true); // 强制更新渲染
+            break;
         }
-    });
 
-    this.updateVisibleItems(true); // 强制更新渲染
+        const dataId = index;
+        this.dataIdMap.set(dataId, {
+            data: true,
+            originalIndex: dataId,
+            layoutInfo: null
+        });
+
+        await this.createCards({ end: 0, dataId })
+
+        index += 1;
+
+    }
+    // options.data.forEach((item, index) => {
+    //     const dataId = index; // this.nextDataId++;
+    //     if (!this.allReadyNodes.has(dataId)) {
+    //         this.dataIdMap.set(dataId, {
+    //             data: true,// item,
+    //             originalIndex: index,
+    //             layoutInfo: null // 将在布局时填充
+    //         });
+    //         // 如果没有准备好这个数据，这里要创建一个占位节点
+    //         this.createCards({ end: 0, dataId });
+    //     }
+    // });
+
+    // this.updateVisibleItems(true); // 强制更新渲染
+
 
-    // 重新计算所有卡片位置并更新位置
-    // this.updatePointCards();
 }
 
 // 某个数据进行了UI变更，触发高度重新绘制
@@ -695,26 +730,23 @@ Waterfall.prototype.updatePointCards = function () {
 
 // 展示loading的回调函数
 Waterfall.prototype.showLoading = function (callback = null) {
+    this.isShowLoading = true;
     const options = this.options;
-    const $container = $(options.container);
     let $node = null
     if (this.$loadingNode) {
         let loadingTop = this.getMaxHeight() + options.rowGap
-        let h = loadingTop + this.$loadingNode.height() + options.marginBottom
-
         this.$loadingNode.css('transform', `translate(0px,${loadingTop}px)`);
-        $(options.container).find('.waterfall-list-scroll').css('height', h + 'px');
-
         $node = this.$loadingNode
     }
 
     if (callback) callback($node)
+    this.setScrollHeight();
 }
 
 // 隐藏loading的回调函数
 Waterfall.prototype.hideLoading = function (callback = null) {
+    this.isShowLoading = false;
     const options = this.options;
-    const $container = $(options.container);
     let $node = null
     if (this.$loadingNode) {
         let h1 = this.getMaxHeight() + options.marginBottom
@@ -722,19 +754,27 @@ Waterfall.prototype.hideLoading = function (callback = null) {
         //如果要设置高度，那么这里判断一下当前是否正在做updata  一般这里被调用时，数据已经读到，在updata的同一时间调用了该函数
         // 如果两个时刻高度是一致的 那么数据就是一致的 这里重新设置回来高度即可
         window.requestAnimationFrame(() => {
-            let h2 = this.getMaxHeight() + options.marginBottom
-            if (h1 === h2) {
-                const $scroll = $(options.container).find('.waterfall-list-scroll')
-                const h = $scroll.height()
-                if (h !== h1) {
-                    $scroll.css('height', h1 + 'px');
-                }
-            }
+            this.setScrollHeight();
         })
         $node = this.$loadingNode
     }
 
     if (callback) callback($node)
+    this.setScrollHeight();
+}
+
+// 设置滚动条列表的高度
+Waterfall.prototype.setScrollHeight = function () {
+    const options = this.options;
+    const $container = $(options.container);
+    let h = this.getMaxHeight();
+    if (this.isShowLoading === true) {
+        if (this.$loadingNode) {
+            h += options.rowGap + this.$loadingNode.height();
+        }
+    }
+    h += options.marginBottom;
+    $container.find('.waterfall-list-scroll').css('height', h + 'px');
 }
 
 function createDefaultRow({ top, left }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.64",
+  "version": "1.0.66-beta1",
   "description": "",
   "main": "index.js",
   "files": [