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

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 = {

package/components/waterfall/waterfall.js

@@ -12,6 +12,7 @@ const DEFAULTS = {
     marginTop: 0,  // 距离顶部距离
     marginBottom: 12,  // 最后一行距离底部距离
     bufferHeight: '2rem', // 缓冲高度，进行可能的预先添加高度
+    startPoints: [], // 起始点坐标
     data: [],              // 数据源
     container: '',                // 容器元素
     renderItem(data, index) {      // 元素首次渲染时的回调函数, 如果把updateItem设置为空，那么更新时则会兜底触发renderItem
@@ -87,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;
@@ -130,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）
@@ -188,7 +198,7 @@ Waterfall.prototype.updateVisibleItems = function (force = false) {
     const startTop = self.scrollTop; // 当前滚动位置
     const endTop = startTop + h;
     // console.log('startTop', startTop)
-    console.log('endTop', endTop)
+    // console.log('endTop', endTop)
 
     // 进行可见区域的渲染更新
     this.updateCardsInView({
@@ -393,20 +403,30 @@ 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;
 }
 
@@ -475,6 +495,7 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }, callback) {
                     'transform': `translate(${row.left}px,${row.top}px)`,
                 }).attr('data-index', nextDataId);
                 this.updateRenderUI($card, data, nextDataId);
+
             } else {
                 $card = this.appendCard(data, nextDataId, position);
             }
@@ -499,35 +520,35 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }, callback) {
 
         this.renderedDataIds.add(nextDataId);
 
-        setTimeout(() => {
-            window.requestAnimationFrame(() => {
-                // 更新列的底部距离
-                column.bottom = top + $card.height();
-                console.log('column.bottom', column.bottom, $card.height());
-                column.children.push(row);
-                row.bottom = column.bottom;
+        // setTimeout(() => {
+        //window.requestAnimationFrame(() => {
 
-                // 检查是否需要继续创建卡片
-                const minHeight = this.getMinHeight();
-                const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
+        column.bottom = top + $card.height();
 
-                if (hasMoreData && (minHeight < end)) {
+        column.children.push(row);
+        row.bottom = column.bottom;
 
-                    this.createCards({ end }, () => {
-                        resolve();
-                        if (callback) {
-                            callback();
-                        }
-                    });
-                } else {
-                    this.setScrollHeight();
-                    resolve();
-                    if (callback) {
-                        callback();
-                    }
+        // 检查是否需要继续创建卡片
+        const minHeight = this.getMinHeight();
+        const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
+
+        if (hasMoreData && (minHeight < end)) {
+
+            this.createCards({ end }, () => {
+                resolve();
+                if (callback) {
+                    callback();
                 }
             });
-        }, 42);
+        } else {
+            this.setScrollHeight();
+            resolve();
+            if (callback) {
+                callback();
+            }
+        }
+        //});
+        // }, 42);
     });
 
 }
@@ -736,7 +757,12 @@ Waterfall.prototype.showLoading = function (callback = 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)
@@ -816,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-beta1",
+  "version": "1.0.66-beta3",
   "description": "",
   "main": "index.js",
   "files": [