tencent.jquery.pix.component 1.0.89 → 1.0.91-beta1

package/change.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+### 1.0.91-beta1
+
+- 瀑布流组件V2版本的滑动流畅度升级
+
 ### 1.0.88-beta2
 
 - getFontSize每次实时获取

package/components/banner/banner.js

@@ -18,6 +18,7 @@ let $ = null;
  * @param {function} [options.click] 点击轮播图时触发，第一个参数为触发元素的jq，第二个参数为 options.list 中对应的项，第三个参数为当前页码
  * @param {function} [options.pageChanged] 翻页时触发，第一个参数为新生效页面元素的jq，第二个参数为 options.list 中对应的项，第三个参数为当前页码
  * @param {function} [options.renderCallback] 自定义渲染回调，第一个参数为 options.list 中对应的项，第二个参数为当前页码，返回值为渲染后的元素
+ * @param {boolean} [options.singNoSwitch=false] 当只有单张图片时是否禁用切换功能（隐藏分页和切换），默认为 false 即单图也展示分页和切换
  */
 export function Banner(options = {}) {
     $ = getEnv().$;
@@ -27,6 +28,7 @@ export function Banner(options = {}) {
     this.options.autoResize ??= true;
     this.options.durationMs = Number(options.durationMs || 0) || 0;
     this.options.dragThreshold = Number(options.dragThreshold || 0.2) || 0.2;
+    this.options.singNoSwitch ??= false;
     this.index = Number(options.index || 0) || 0;
     // 用于保存 options.list 中每一项对应的 imgObj（按 list 索引存储），避免依赖 jQuery 的 data 功能
     this.imgObjMap = {};
@@ -57,6 +59,9 @@ Banner.prototype.fitWidth = function () {
  * 跳转到上一页
  */
 Banner.prototype.prevPage = async function () {
+    if (this.options.singNoSwitch && this.options.list.length <= 1) {
+        return;
+    }
     this.pauseAutoPlay();
     await this.gotoPageUnchecked(this.index - 1);
     this.startAutoPlay();
@@ -66,6 +71,9 @@ Banner.prototype.prevPage = async function () {
  * 跳转到下一页
  */
 Banner.prototype.nextPage = async function () {
+    if (this.options.singNoSwitch && this.options.list.length <= 1) {
+        return;
+    }
     this.pauseAutoPlay();
     await this.gotoPageUnchecked(this.index + 1);
     this.startAutoPlay();
@@ -149,6 +157,10 @@ Banner.prototype.init = function () {
 }
 
 Banner.prototype.startAutoPlay = function () {
+    // 单图且 singNoSwitch 为 true 时，不启动自动播放
+    if (this.options.singNoSwitch && this.options.list.length === 1) {
+        return;
+    }
     if (this.options.durationMs > 0 && this.timer == null) {
         this.timer = setInterval(() => {
             this.nextPage()
@@ -173,9 +185,12 @@ Banner.prototype.createHtml = function () {
     $t.empty();
     const signWidth = this.signWidth = $t.width()
 
-    const allWidth = this.allWidth = signWidth * (len + 2)
+    // 单图且 singNoSwitch 为 true 时，不创建循环占位，直接展示单张图片
+    const isSingleNoSwitch = this.options.singNoSwitch && len === 1;
+
+    const allWidth = this.allWidth = isSingleNoSwitch ? signWidth : signWidth * (len + 2)
     const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
-    this.currentTranslate = -signWidth * (this.index + 1)
+    this.currentTranslate = isSingleNoSwitch ? 0 : -signWidth * (this.index + 1)
     $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
 
     // 重置 imgObj 映射表，按 list 的索引保存 imgObj 引用
@@ -186,10 +201,12 @@ Banner.prototype.createHtml = function () {
         }
     }
 
-    // 加第0个位置
-    $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[len - 1].url}" style="width:${this.signWidth}px;">
-            </div>
-        `)
+    if (!isSingleNoSwitch) {
+        // 加第0个位置
+        $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[len - 1].url}" style="width:${this.signWidth}px;">
+                </div>
+            `)
+    }
     for (let i = 0; i < len; i++) {
         const item = this.options.list[i]
         const $li = $(`<div class="banner-inner-li" data-background-url="${item.url}" style="width:${this.signWidth}px;">
@@ -197,19 +214,23 @@ Banner.prototype.createHtml = function () {
         `)
         $inner.append($li)
     }
-    // 加第N+1
-    $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[0].url}" style="width:${this.signWidth}px;">
-            </div>
-        `)
+    if (!isSingleNoSwitch) {
+        // 加第N+1
+        $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[0].url}" style="width:${this.signWidth}px;">
+                </div>
+            `)
+    }
 
     const preloadIdx = this.index;
     this.loadBackground(preloadIdx);
-    this.loadBackground((preloadIdx + 1) % len); // prev
-    this.loadBackground((preloadIdx - 1 + len) % len); // next
+    if (!isSingleNoSwitch) {
+        this.loadBackground((preloadIdx + 1) % len); // prev
+        this.loadBackground((preloadIdx - 1 + len) % len); // next
+    }
 
     $t.append($inner)
 
-    if (this.options.isTitleEnabled) {
+    if (this.options.isTitleEnabled && !isSingleNoSwitch) {
         // 创建 titlebox
         const $titleBox = $(`<div class="banner-title-box">${this.options.list[this.index].title}</div>`)
 
@@ -246,24 +267,31 @@ Banner.prototype.createCustomHtml = function () {
     $t.empty();
     const signWidth = this.signWidth = $t.width()
 
-    const allWidth = this.allWidth = signWidth * (len + 2)
+    // 单图且 singNoSwitch 为 true 时，不创建循环占位
+    const isSingleNoSwitch = this.options.singNoSwitch && len === 1;
+
+    const allWidth = this.allWidth = isSingleNoSwitch ? signWidth : signWidth * (len + 2)
     const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
-    this.currentTranslate = -signWidth * (this.index + 1)
+    this.currentTranslate = isSingleNoSwitch ? 0 : -signWidth * (this.index + 1)
     $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
 
-    let $li = $(this.options.renderCallback(this.options.list[len - 1], len - 1));
-    $li.width(signWidth);
-    $inner.append($li);
+    if (!isSingleNoSwitch) {
+        let $li = $(this.options.renderCallback(this.options.list[len - 1], len - 1));
+        $li.width(signWidth);
+        $inner.append($li);
+    }
 
     for (let i = 0; i < len; i++) {
-        $li = $(this.options.renderCallback(this.options.list[i], i));
+        let $li = $(this.options.renderCallback(this.options.list[i], i));
         $li.width(signWidth);
         $inner.append($li);
     }
 
-    $li = $(this.options.renderCallback(this.options.list[0], 0));
-    $li.width(signWidth);
-    $inner.append($li);
+    if (!isSingleNoSwitch) {
+        let $li = $(this.options.renderCallback(this.options.list[0], 0));
+        $li.width(signWidth);
+        $inner.append($li);
+    }
 
     $t.append($inner);
 }
@@ -273,6 +301,19 @@ Banner.prototype.bindEvent = function () {
     const len = this.options.list.length;
     const $inner = this.$inner;
 
+    // 单图且 singNoSwitch 为 true 时，不绑定拖拽和切换事件
+    if (this.options.singNoSwitch && len === 1) {
+        // 仅绑定点击事件
+        $inner.on('click', function (e) {
+            if (!self.options.click) {
+                return
+            }
+            const $t = self.$inner.children().eq(0);
+            self.options.click($t, self.options.list[0], 0);
+        });
+        return;
+    }
+
     // pStart 时的 clientX
     let originalX = 0;
 
@@ -467,8 +508,9 @@ function childIdxToListIdx(childIdx, len) {
 Banner.prototype.loadAllBackgrounds = function () {
     const len = this.options.list.length;
     const imgObjMap = this.imgObjMap || {};
+    const isSingleNoSwitch = this.options.singNoSwitch && len === 1;
     this.$inner.children().each(function (childIdx) {
-        const listIdx = childIdxToListIdx(childIdx, len);
+        const listIdx = isSingleNoSwitch ? childIdx : childIdxToListIdx(childIdx, len);
         applyBackgroundImage($(this), imgObjMap[listIdx]);
     });
     // console.log('banner images loaded');
@@ -481,7 +523,8 @@ Banner.prototype.loadAllBackgrounds = function () {
 Banner.prototype.loadBackground = function (pos) {
     console.log('loadBackground pos === ', pos);
     const imgObjMap = this.imgObjMap || {};
-    let $item = this.$inner.children().eq(pos + 1);
+    const isSingleNoSwitch = this.options.singNoSwitch && this.options.list.length === 1;
+    let $item = this.$inner.children().eq(isSingleNoSwitch ? pos : pos + 1);
     applyBackgroundImage($item, imgObjMap[pos]);
 
     // 加载滚动占位的图片

package/components/waterfallv2/waterfallv2.js

@@ -176,25 +176,32 @@ Waterfallv2.prototype.init = function (optionsMain = null) {
         </div>
       `);
 
-
+    // 【优化】缓存 DOM 引用，避免每次都执行 jQuery find 查询
+    this.$scrollWrapper = $container.find('.waterfallv2-list-scroll');
+    this.$viewport = $container.find('.Waterfallv2-list-viewport');
 
     // 如果有定义loading函数  那么创建一个loading节点元素
     if (options.createLoading) {
         this.$loadingNode = $(
             `<div class="waterfallv2-loading" style="position:absolute;top:0;left:0;width:100%;transform: translate(0px, -99999px)"></div>`
         );
-        $container.find('.Waterfallv2-list-viewport').append(this.$loadingNode);
+        this.$viewport.append(this.$loadingNode);
 
         options.createLoading(this.$loadingNode);
     }
 
-    // 绑定滚动事件（节流处理）
+    // 绑定滚动事件（真正的 rAF 节流：一帧内只执行一次 updateVisibleItems）
+    this._rafPending = false;
     $scrollDom.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
 
-        window.requestAnimationFrame(() => {
-            self.updateVisibleItems();
-        });
+        if (!self._rafPending) {
+            self._rafPending = true;
+            window.requestAnimationFrame(() => {
+                self._rafPending = false;
+                self.updateVisibleItems();
+            });
+        }
 
         if (options.onscroll && options.onscroll.constructor === Function) {
             options.onscroll(this, self.scrollTop);
@@ -451,8 +458,7 @@ Waterfallv2.prototype.updateVisibleItems = function (force = false) {
 // 新增卡片
 Waterfallv2.prototype.appendCard = function (data, dataId, { top, left }) {
     const options = this.options;
-    const $container = $(options.container);
-    const $viewport = $container.find('.Waterfallv2-list-viewport');
+    const $viewport = this.$viewport;
 
     if (!this.dataIdMap.has(dataId)) {
         console.error('Waterfallv2: Invalid dataId in appendCard', dataId);
@@ -499,13 +505,30 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
 
     const startNum = start - options.bufferHeight;
     const endNum = end + options.bufferHeight;
+
+    // 【优化】构建 dataId -> {data, index} 的快速查找 Map，避免每个 row 都执行 O(n) 的 Array.find 和 indexOf
+    const dataLookupMap = new Map();
+    for (let i = 0; i < options.data.length; i++) {
+        const item = options.data[i];
+        dataLookupMap.set(item.dataId, { data: item, index: i });
+    }
+
     // 新方案：基于数据ID映射机制
     const newActiveNodes = new Map();
+    // 【优化】用 Set 存储已使用的节点引用，替代 hasNodeInActives 的 O(n) 遍历
+    const usedNodeSet = new Set();
+
     for (let i = 0; i < this.columns; i++) {
         const column = this.columnItems[i];
 
         for (let j = 0; j < column.children.length; j++) {
             const row = column.children[j];
+
+            // 【优化】提前退出：column.children 按 top 排序，当 row.top > endNum 时后续都不可见
+            if (row.top > endNum) {
+                break;
+            }
+
             const dataId = row.dataId; // 使用dataId替代renderIndex
 
             // 验证数据ID有效性
@@ -521,8 +544,10 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                 continue;
             }
 
-            // 通过 dataId 找到对应的数据对象
-            const data = options.data.find(item => item.dataId === dataId);
+            // 【优化】通过 Map O(1) 查找替代 Array.find O(n)
+            const _lookup = dataLookupMap.get(dataId);
+            const data = _lookup ? _lookup.data : undefined;
+            const _dataIndex = _lookup ? _lookup.index : -1;
 
             // 如果当前这个节点是特殊节点，只更新位置，不参与节点复用
             let specialNode = false;
@@ -537,7 +562,7 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                     }).attr('data-index', dataId);
 
                     if (force) {
-                        this.updateRenderUI(row.$node, data, dataId);
+                        this.updateRenderUI(row.$node, data, dataId, _dataIndex);
                     }
                 } else {
                     console.warn('Waterfallv2: Special node DOM not found for dataId', dataId);
@@ -545,67 +570,68 @@ Waterfallv2.prototype.updateCardsInView = async function ({ start, end, force =
                 continue;
             }
 
+            // 跳过不在可视区域的 row（top 在 startNum 之前的）
+            if (row.bottom < startNum) {
+                continue;
+            }
+
             // 在可视区域内 进行有关卡片的操作
-            const bool = row.top <= endNum && row.bottom >= startNum;
-            if (bool) {
-                const $card = this.activeNodes.get(dataId);
+            const $card = this.activeNodes.get(dataId);
 
-                let $node = null;
+            let $node = null;
 
-                let bool = true;
-                if ($card) {
-                    bool = hasNodeInActives(newActiveNodes, $card)
+            // 【优化】用 Set.has() O(1) 替代 hasNodeInActives 的 Map.forEach O(n)
+            let isCardUsed = true;
+            if ($card) {
+                isCardUsed = usedNodeSet.has($card);
+            }
+            if (isCardUsed === false) {
+                $node = $card;
+                this.activeNodes.delete(dataId);
+                if (force) {
+                    this.updateRenderUI($node, data, dataId, _dataIndex);
                 }
-                if (bool === false) {
-                    $node = $card;
-                    this.activeNodes.delete(dataId);
-                    if (force) {
-                        this.updateRenderUI($node, data, dataId);
-                    }
 
-                } else {
-                    const $card = this.allReadyNodes.get(dataId);
-                    let bool = true;
-                    if ($card) {
-                        bool = hasNodeInActives(newActiveNodes, $card)
-                    }
-                    if (bool === false) {
-                        $node = $card;
-                        this.updateRenderUI($node, data, dataId);
+            } else {
+                const $readyCard = this.allReadyNodes.get(dataId);
+                let isReadyUsed = true;
+                if ($readyCard) {
+                    isReadyUsed = usedNodeSet.has($readyCard);
+                }
+                if (isReadyUsed === false) {
+                    $node = $readyCard;
+                    this.updateRenderUI($node, data, dataId, _dataIndex);
 
+                } else {
+                    $node = getNodePoolPop(this.nodePool, usedNodeSet);
+                    if ($node === null) {
+                        $node = this.appendCard(data, dataId, {
+                            top: row.top, left: row.left
+                        });
+                        row.$node = $node;
                     } else {
-                        $node = getNodePoolPop(this.nodePool, newActiveNodes);
-                        if ($node === null) {
-                            $node = this.appendCard(data, dataId, {
-                                top: row.top, left: row.left
-                            });
-                            row.$node = $node;
-                        } else {
-                            this.updateRenderUI($node, data, dataId);
-                            row.$node = $node;
-                        }
+                        this.updateRenderUI($node, data, dataId, _dataIndex);
+                        row.$node = $node;
                     }
                 }
-                $node.css({
-                    'transform': `translate(${row.left}px,${row.top}px)`,
-                }).attr('data-index', dataId);
-
-                newActiveNodes.set(dataId, $node);
-
-                // 清除掉在NodePool中的card
-                const index = this.nodePool.indexOf($card);
-                if (index !== -1) {
-                    this.nodePool.splice(index, 1);
-                }
             }
+            $node.css({
+                'transform': `translate(${row.left}px,${row.top}px)`,
+            }).attr('data-index', dataId);
+
+            newActiveNodes.set(dataId, $node);
+            usedNodeSet.add($node);
         }
     }
 
     // 阶段2：处理不活跃节点
+    // 【优化】用 Set 判断是否已在 nodePool 中，避免 indexOf O(n)
+    const nodePoolSet = new Set(this.nodePool);
     this.activeNodes.forEach($node => {
         $node.css('transform', `translateY(-9999px)`);// 移出可视区域
-        if (this.nodePool.indexOf($node) === -1) {
+        if (!nodePoolSet.has($node)) {
             this.nodePool.push($node);
+            nodePoolSet.add($node);
         }
     });
     this.activeNodes = newActiveNodes;
@@ -797,7 +823,7 @@ Waterfallv2.prototype.createColumn = function (index) {
     return res;
 }
 
-Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId) {
+Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId, _originalIndex) {
     const options = this.options;
 
     if (!this.dataIdMap.has(dataId)) {
@@ -805,8 +831,8 @@ Waterfallv2.prototype.updateRenderUI = function ($node, data, dataId) {
         return;
     }
 
-    // 实时获取数据在 options.data 中的当前索引
-    const originalIndex = options.data.indexOf(data);
+    // 【优化】如果调用方已传入索引则直接使用，避免 O(n) 的 indexOf 查找
+    const originalIndex = (_originalIndex !== undefined) ? _originalIndex : options.data.indexOf(data);
 
     if (this.hasUpdateItem === true) {
         options.updateItem($node, data, originalIndex);
@@ -1075,8 +1101,7 @@ Waterfallv2.prototype.getSpecialNodeDOM = function (dataId) {
 Waterfallv2.prototype.getBatchCardNewHeights = async function (dataIds, newData) {
     const options = this.options;
     const $ = getEnv().$;
-    const $container = $(options.container);
-    const $viewport = $container.find('.Waterfallv2-list-viewport');
+    const $viewport = this.$viewport;
 
     const cardInfos = new Map();
 
@@ -1279,8 +1304,7 @@ Waterfallv2.prototype.getCardNewHeight = async function (dataId, data) {
             return this.getCardOldHeight(dataId);
         }
 
-        const $container = $(options.container);
-        const $viewport = $container.find('.Waterfallv2-list-viewport');
+        const $viewport = this.$viewport;
 
         let $node = getNodePoolPop(this.nodePool, this.activeNodes);
         let isBorrowed = false;
@@ -1580,7 +1604,6 @@ Waterfallv2.prototype.hideLoading = function (callback = null) {
 // 设置滚动条列表的高度
 Waterfallv2.prototype.setScrollHeight = function () {
     const options = this.options;
-    const $container = $(options.container);
     let h = this.getMaxHeight();
     if (this.isShowLoading === true) {
         if (this.$loadingNode) {
@@ -1588,7 +1611,8 @@ Waterfallv2.prototype.setScrollHeight = function () {
         }
     }
     h += options.marginBottom;
-    $container.find('.waterfallv2-list-scroll').css('height', h + 'px');
+    // 【优化】使用缓存的 DOM 引用，避免每次 find 查询
+    this.$scrollWrapper.css('height', h + 'px');
 }
 
 /**
@@ -1691,21 +1715,29 @@ function getBottomByColumn(column) {
     return child[child.length - 1].bottom;
 }
 
+// 【优化】保留 hasNodeInActives 供非热路径使用（如 createCards），但增加提前退出
 function hasNodeInActives(mapObj, $node) {
-    let bool = false
-    mapObj.forEach((item) => {
+    for (const item of mapObj.values()) {
         if (item === $node) {
-            bool = true;
+            return true;
         }
-    });
-    return bool;
+    }
+    return false;
 }
 
-// 从众多jq对象数组取得一个不重复的
-function getNodePoolPop(nodePool, actives) {
+// 【优化】从节点池取得一个未被使用的节点
+// usedNodes 参数现在接受 Set（O(1) 查找），同时兼容 Map（降级为遍历）
+function getNodePoolPop(nodePool, usedNodes) {
     for (let i = 0; i < nodePool.length; i++) {
         const $node = nodePool[i];
-        if (!hasNodeInActives(actives, $node)) {
+        // 如果是 Set，直接用 has；如果是 Map，降级遍历
+        let isUsed = false;
+        if (usedNodes instanceof Set) {
+            isUsed = usedNodes.has($node);
+        } else {
+            isUsed = hasNodeInActives(usedNodes, $node);
+        }
+        if (!isUsed) {
             nodePool.splice(i, 1);
             return $node;
         }

package/package.json

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