tencent.jquery.pix.component 1.0.66 → 1.0.67

package/components/video/videoplayer.js

@@ -13,6 +13,7 @@ import './videocss.scss'
  * @param {object} options 选项
  * @param {string} options.container 容器元素的jquery选择器
  * @param {string} options.vid 腾讯视频id
+ * @param {string} [options.videoUrl] 视频地址，非腾讯视频时使用，比如上传到cos的视频
  * @param {string} [options.previewUrl] 视频预览图
  * @param {0|1} [options.videoType=1] 视频类型选项，0: 标清，1: 高清
  * @param {number} [options.autoHideControlsDelayMs=5000] 自动隐藏控制条延迟时间，单位ms
@@ -51,8 +52,14 @@ VideoPlayer.prototype.init = async function() {
         clickToPause: false,
         ...this.options
     }
+    //如果vid不存在，则直接获取option.videoUrl
+    const videoURL = this.options.vid ? await getVideoURL(this.options.vid, this.options.videoType) : this.options.videoUrl;
+    //如果videoUrl不存在，则抛出错误
+    if (!videoURL) {
 
-    const videoURL = await getVideoURL(this.options.vid, this.options.videoType);
+        throw new Error('videoURL is required');
+
+    }
     $container.find('.myplayer-video-mask').before(`<video src="${videoURL}"></video>`);
 
     this.state = {
@@ -61,6 +68,9 @@ VideoPlayer.prototype.init = async function() {
         updatingProgress: false,
         controlsDelayStart: 0,
         firstPlay: true,
+        isFullScreen: false,
+        originalParent: null,  // 保存原始父容器引用
+        originalNextSibling: null,  // 保存原始位置的下一个兄弟节点
     }
 
     // 根据showProgressBar选项控制进度条显示
@@ -95,15 +105,27 @@ VideoPlayer.prototype.bindEvent = function() {
         .on('canplay', 'video', () => {
             console.log('canplay');
             this.updateTotalTime();
+        })
+        .on('loadedmetadata', 'video', () => {
+            console.log('loadedmetadata');
+            this.updateTotalTime();
+        })
+        .on('durationchange', 'video', () => {
+            console.log('durationchange');
+            this.updateTotalTime();
+        })
+        .on('ended', 'video', () => {
+            console.log('video ended');
+            this.stop();
         });
 
     // 只有在显示进度条时才绑定进度条相关事件
     if (this.options.showProgressBar) {
         container
-            .on('dragstart', () => { console.log('video container dragstart') }, true)
-            .on('drag', () => { console.log('video container drag') }, true)
-            .on('dragend', () => { console.log('video container dragend') }, true)
-            .on('click', () => { console.log('video container click') }, true)
+            .on('dragstart', () => { console.log('video container dragstart') })
+            .on('drag', () => { console.log('video container drag') })
+            .on('dragend', () => { console.log('video container dragend') })
+            .on('click', () => { console.log('video container click') })
             .on('dragstart', '.myplayer-progress', (e) => {
                 if (e.originalEvent) {
                     this.progressDragStart(e.originalEvent);
@@ -167,6 +189,7 @@ VideoPlayer.prototype.pause = function() {
 }
 
 VideoPlayer.prototype.stop = function() {
+    console.log('stop');
     const video = this.$container.find('video')[0];
     video.pause();
     video.currentTime = 0;
@@ -226,7 +249,7 @@ VideoPlayer.prototype.hideControlsWithDelay = function() {
     this.state.controlsDelayStart = Date.now();
     setTimeout(() => {
         const nowTime = Date.now();
-        console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
+        // console.debug("nowTime - this.state.controlsDelayStart", nowTime - this.state.controlsDelayStart);
 
         // 有时正常时间差也会小于设定的时间，所以判断时减去100ms
         if (this.state.playing === true && nowTime - this.state.controlsDelayStart >= this.options.autoHideControlsDelayMs - 100) {
@@ -245,21 +268,38 @@ VideoPlayer.prototype.startUpdatingProgress = function() {
 
 VideoPlayer.prototype.updateProgress = function() {
     const video = this.$container.find('video')[0];
-    const currentTime = video.currentTime;
-    const duration = video.duration;
-    const progress = currentTime / duration;
-
-    const parentWidth = this.$container.find('.myplayer-progress').width();
-    this.$container.find('.myplayer-subprogress').width(`${progress * parentWidth}px`);
+    if (!video) return;
+    
+    const currentTime = video.currentTime || 0;
+    const duration = video.duration || 0;
+    
+    // 防止duration为NaN或0时计算出错
+    if (duration && !isNaN(duration) && duration > 0) {
+        const progress = currentTime / duration;
+        const parentWidth = this.$container.find('.myplayer-progress').width();
+        this.$container.find('.myplayer-subprogress').width(`${progress * parentWidth}px`);
+        //当progress为1时，将暂停按钮隐藏，播放按钮显示
+        if (progress >= 1) {
+            this.$container.find('.myplayer-btn-pause').hide();
+            this.$container.find('.myplayer-btn-play').show();
+        }
+    }
 
-    this.$container.find('.myplayer-playtime').html(formatTime(currentTime / this.durationFactor));
+    // 格式化当前播放时间（currentTime单位为秒）
+    this.$container.find('.myplayer-playtime').html(formatTime(currentTime));
 }
 
 VideoPlayer.prototype.updateTotalTime = function() {
     const video = this.$container.find('video')[0];
+    if (!video) return;
+    
     const duration = video.duration;
-
-    this.$container.find('.myplayer-totaltime').html(formatTime(duration / this.durationFactor));
+    
+    // 只有当duration有效时才更新显示
+    if (duration && !isNaN(duration) && isFinite(duration) && duration > 0) {
+        // duration单位为秒
+        this.$container.find('.myplayer-totaltime').html(formatTime(duration));
+    }
 }
 
 VideoPlayer.prototype.toggleFullScreen = function() {
@@ -270,16 +310,22 @@ VideoPlayer.prototype.toggleFullScreen = function() {
     const innerContainer = $container.find('.myplayer-container');
 
     if (innerContainer.hasClass('myplayer-full-screen')) {
+        // 退出全屏：将容器移回原位置
+        this._moveBackToOriginal();
         innerContainer.removeClass('myplayer-full-screen');
         bottom.removeClass('myplayer-full-screen');
         fullScreenBtn.show();
         exitFullScreenBtn.hide();
+        this.state.isFullScreen = false;
         this.options.stateChanged.call(this, 'exitFullScreen');
     } else {
+        // 进入全屏：将容器移动到body
+        this._moveToBody();
         innerContainer.addClass('myplayer-full-screen');
         bottom.addClass('myplayer-full-screen');
         fullScreenBtn.hide();
         exitFullScreenBtn.show();
+        this.state.isFullScreen = true;
         this.options.stateChanged.call(this, 'enterFullScreen');
     }
 
@@ -294,22 +340,83 @@ VideoPlayer.prototype.setFullScreen = function (target = true) {
     const innerContainer = $container.find('.myplayer-container');
 
     if (!target && innerContainer.hasClass('myplayer-full-screen')) {
+        // 退出全屏：将容器移回原位置
+        this._moveBackToOriginal();
         innerContainer.removeClass('myplayer-full-screen');
         bottom.removeClass('myplayer-full-screen');
         fullScreenBtn.show();
         exitFullScreenBtn.hide();
+        this.state.isFullScreen = false;
         this.options.stateChanged.call(this, 'exitFullScreen');
     } else if (target && !innerContainer.hasClass('myplayer-full-screen')) {
+        // 进入全屏：将容器移动到body
+        this._moveToBody();
         innerContainer.addClass('myplayer-full-screen');
         bottom.addClass('myplayer-full-screen');
         fullScreenBtn.hide();
         exitFullScreenBtn.show();
+        this.state.isFullScreen = true;
         this.options.stateChanged.call(this, 'enterFullScreen');
     }
 
     this.hideControlsWithDelay();
 }
 
+/**
+ * 将容器移动到body（进入全屏时调用）
+ * @private
+ */
+VideoPlayer.prototype._moveToBody = function() {
+    const containerEl = this.$container[0];
+    
+    // 保存原始位置信息（仅在第一次移动时保存）
+    if (!this.state.originalParent) {
+        this.state.originalParent = containerEl.parentNode;
+        this.state.originalNextSibling = containerEl.nextSibling;
+    }
+    
+    // 从原容器解绑
+    this.$container.off();
+    // 从body解绑所有相关事件
+    $(document.body).off('click.myplayer');
+    $(document.body).off('canplay.myplayer');
+    $(document.body).off('dragstart.myplayer');
+    $(document.body).off('drag.myplayer');
+    $(document.body).off('dragend.myplayer');
+    
+    // 移动到body
+    document.body.appendChild(containerEl);
+    
+    // 重新绑定事件
+    this.bindEvent();
+}
+
+/**
+ * 将容器移回原位置（退出全屏时调用）
+ * @private
+ */
+VideoPlayer.prototype._moveBackToOriginal = function() {
+    const containerEl = this.$container[0];
+    
+    // 如果没有保存原始位置，说明还没移动过，直接返回
+    if (!this.state.originalParent) {
+        return;
+    }
+    
+    // 解绑事件
+    this.$container.off();
+    
+    // 移回原位置
+    if (this.state.originalNextSibling) {
+        this.state.originalParent.insertBefore(containerEl, this.state.originalNextSibling);
+    } else {
+        this.state.originalParent.appendChild(containerEl);
+    }
+    
+    // 重新绑定事件
+    this.bindEvent();
+}
+
 /**
  * 进度条拖动开始
  * @param {MouseEvent} e 
@@ -340,10 +447,14 @@ VideoPlayer.prototype.progressDrag = function(e) {
     const video = $container.find('video')[0];
 
     const parentWidth = progress.width();
-    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
+    // 使用getBoundingClientRect计算准确的点击位置
+    const rect = progress[0].getBoundingClientRect();
+    const clientX = e.clientX !== undefined ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    const curOffset = Math.max(Math.min(clientX - rect.left, parentWidth), 0);
+    
     subprogress.width(`${curOffset}px`);
     const adjustedPlayTime = curOffset / parentWidth * video.duration;
-    $container.find('.myplayer-playtime').html(formatTime(adjustedPlayTime / this.durationFactor));
+    $container.find('.myplayer-playtime').html(formatTime(adjustedPlayTime));
 }
 
 /**
@@ -359,10 +470,19 @@ VideoPlayer.prototype.progressDragEnd = function(e) {
     const video = $container.find('video')[0];
     const progress = $container.find('.myplayer-progress');
     const parentWidth = progress.width();
-    const curOffset = Math.max(Math.min(e.offsetX, parentWidth), 0);
-
-    // currentTime set 单位s, get 单位ms
-    video.currentTime = curOffset / progress.width() * video.duration / this.durationFactor;
+    
+    // 使用getBoundingClientRect计算准确的点击位置
+    const rect = progress[0].getBoundingClientRect();
+    const clientX = e.clientX !== undefined ? e.clientX : (e.touches ? e.touches[0].clientX : 0);
+    const curOffset = Math.max(Math.min(clientX - rect.left, parentWidth), 0);
+    
+    // 计算目标播放时间（单位：秒）
+    const targetTime = (curOffset / parentWidth) * video.duration;
+    
+    // 确保duration有效再设置currentTime
+    if (video.duration && !isNaN(video.duration) && video.duration > 0) {
+        video.currentTime = targetTime;
+    }
 
     this.play();
     

package/components/waterfall/waterfall.js

@@ -12,11 +12,13 @@ const DEFAULTS = {
     marginTop: 0,  // 距离顶部距离
     marginBottom: 12,  // 最后一行距离底部距离
     bufferHeight: '2rem', // 缓冲高度，进行可能的预先添加高度
+    startPoints: [], // 起始点坐标
     data: [],              // 数据源
     container: '',                // 容器元素
     renderItem(data, index) {      // 元素首次渲染时的回调函数, 如果把updateItem设置为空，那么更新时则会兜底触发renderItem
         return '<div class="waterfall-item"></div>';
     },
+    scrollDom: null, // 滚动元素,如果传入了滚动元素，那么用来计算的窗口高度就以滚动元素的高度为准
     // 传入 $node, data, index
     updateItem: null, // 元素更新时的回调函数
     onscroll: null,   // 滚动事件回调函数
@@ -86,6 +88,13 @@ export function Waterfall(optionsInput = {}) {
             options.marginBottom = parseFloat(options.marginBottom);
         }
     }
+    options.startPoints.forEach((item, index) => {
+        if (item.constructor === String) {
+            options.startPoints[index] = remToPx(item);
+        } else {
+            item = parseFloat(item);
+        }
+    });
 
     const allWidth = $container.width();
     this.allWidth = allWidth;
@@ -129,6 +138,8 @@ Waterfall.prototype.init = function () {
     const $container = $(options.container);
     const $scrollDom = options.scrollDom ? $(options.scrollDom) : $container;
 
+    this.$scrollDom = $scrollDom;
+
     this.nodePool = [];            // DOM 节点池
     this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
     this.allReadyNodes = new Map();    // 所有节点（索引 -> DOM）
@@ -177,11 +188,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({
@@ -232,13 +249,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;
@@ -386,142 +403,154 @@ Waterfall.prototype.getMinHeight = function () {
 Waterfall.prototype.getMinHeightColumn = function () {
     let minHeight = -1;
     let mimHeightColumn = null;
+    let index = -1;
+    const startPoints = this.options.startPoints || [];
     for (let i = 0; i < this.columns; i++) {
         const column = this.columnItems[i]
-
-        // 获取每组元素列表的最后一个bottom值
-        if (minHeight > column.bottom) {
+        if (minHeight === -1) {
             minHeight = column.bottom;
             mimHeightColumn = column;
-        } else if (minHeight === -1) {
+            index = i;
+        } else if (minHeight > column.bottom) {
+            // 获取每组元素列表的最后一个bottom值
             minHeight = column.bottom;
             mimHeightColumn = column;
+            index = i;
         }
 
     }
 
+    if (minHeight === 0 && index > -1) {
+        if (startPoints.length > index) {
+            // 设置一下起始点的初始化
+            mimHeightColumn.bottom = startPoints[index];
+        }
+    }
+
     return mimHeightColumn;
 }
 
 // 创建卡片
-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');
-        this.setScrollHeight();
-        return;
-    }
+        // 如果没有更多数据需要渲染
+        if (nextDataId === null) {
+            this.setScrollHeight();
+            return resolve();
+        }
 
-    const dataInfo = this.dataIdMap.get(nextDataId);
-    if (!dataInfo || !dataInfo.data) {
-        console.warn('Waterfall: Invalid data for dataId', nextDataId);
-        return;
-    }
+        const dataInfo = this.dataIdMap.get(nextDataId);
+        if (!dataInfo || !dataInfo.data) {
+            console.warn('Waterfall: Invalid data for dataId', nextDataId);
+            return resolve();
+        }
 
-    if (this.renderIndex >= options.data.length) {
-        this.setScrollHeight();
-        return
-    }
+        if (this.renderIndex >= options.data.length) {
+            this.setScrollHeight();
+            return resolve();
+        }
 
-    const data = options.data[nextDataId];
+        const data = options.data[nextDataId];
 
-    let column = this.getMinHeightColumn();
-    if (column === null) {
-        column = this.columnItems[0];
-    }
+        let column = this.getMinHeightColumn();
+        if (column === null) {
+            column = this.columnItems[0];
+        }
 
-    const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
-    const position = { top, left: column.left };
-    const row = createDefaultRow(position);
+        const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
+        const position = { top, left: column.left };
+        const row = createDefaultRow(position);
 
-    this.renderIndex += 1;
+        this.renderIndex += 1;
 
-    let specialNode = false;
+        let specialNode = false;
 
-    // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
-    if (options.shouldOccupySpace) {
-        specialNode = options.shouldOccupySpace(data) || false;
-    }
+        // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+        if (options.shouldOccupySpace) {
+            specialNode = options.shouldOccupySpace(data) || 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 {
+        // 添加卡片，使用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);
+            }
 
-    row.$node = $card;
-    row.dataId = nextDataId; // 使用dataId替代renderIndex
-    if (dataId !== -1) {
-        row.dataId = dataId;
-    }
+        }
 
-    // 记录布局信息
-    // 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);
+        }
 
+        this.renderedDataIds.add(nextDataId);
 
-    if (specialNode === false) {
-        // 把新增的卡片放进 activeNodes 当成活跃节点元素，那么是 可以动态使用的
-        this.activeNodes.set(nextDataId, $card);
+        // setTimeout(() => {
+        //window.requestAnimationFrame(() => {
 
-        this.allReadyNodes.set(nextDataId, $card);
-    } else {
-        // 如果是特殊的，这里不要记录了 
-        this.allReadyNodes.set(nextDataId, null);
-    }
+        column.bottom = top + $card.height();
 
-    this.renderedDataIds.add(nextDataId);
+        column.children.push(row);
+        row.bottom = column.bottom;
 
-    // 更新列的底部距离
-    column.bottom = top + $card.height();
-    column.children.push(row);
-    row.bottom = column.bottom;
+        // 检查是否需要继续创建卡片
+        const minHeight = this.getMinHeight();
+        const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
 
-    // 检查是否需要继续创建卡片
-    const minHeight = this.getMinHeight();
-    const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
+        if (hasMoreData && (minHeight < end)) {
+
+            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');
-        this.setScrollHeight();
-    }
 }
 
 
@@ -564,7 +593,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;
 
@@ -574,23 +603,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变更，触发高度重新绘制
@@ -702,12 +753,16 @@ Waterfall.prototype.updatePointCards = function () {
 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
         this.$loadingNode.css('transform', `translate(0px,${loadingTop}px)`);
-        $node = this.$loadingNode
+        $node = this.$loadingNode;
+        window.requestAnimationFrame(() => {
+            setTimeout(() => {
+                this.$scrollDom.scrollTop(loadingTop + this.$loadingNode.height());
+            });
+        });
     }
 
     if (callback) callback($node)
@@ -718,7 +773,6 @@ Waterfall.prototype.showLoading = function (callback = null) {
 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
@@ -726,14 +780,6 @@ 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
@@ -796,4 +842,5 @@ function getNodePoolPop(nodePool, actives) {
         }
     }
     return null;
-}
+}
+

package/package.json

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