tencent.jquery.pix.component 1.0.63-beta.4 → 1.0.63-beta.6

package/components/waterfall/waterfall.js

@@ -1,3 +1,4 @@
+import "./waterfall.scss"
 import { getEnv } from "../config.js";
 import { remToPx } from "../../utils/utils.js";
 
@@ -19,7 +20,10 @@ const DEFAULTS = {
     // 传入 $node, data, index
     updateItem: null, // 元素更新时的回调函数
     onscroll: null,   // 滚动事件回调函数
-    shouldOccupySpace: null // 是否是静态数据的回调函数，静态数据能够占用元素
+    shouldOccupySpace: null, // 是否是静态数据的回调函数，静态数据能够占用元素
+    showLoading: null,  // 展示loading的回调函数 params:$node
+    hideLoading: null,  // 隐藏loading的回调函数 
+    createLoading: null,  // 创建loading的回调函数
 };
 
 export function Waterfall(optionsInput = {}) {
@@ -36,6 +40,8 @@ export function Waterfall(optionsInput = {}) {
     this.nextDataId = 0; // 下一个数据ID
     this.renderedDataIds = new Set(); // 已渲染的数据ID集合
 
+    this.$loadingNode = null;
+
 
     // 间隔字符串转数字
     if (options.columnGap.constructor === String) {
@@ -125,14 +131,24 @@ Waterfall.prototype.init = function () {
     this.allReadyNodes = new Map();    // 所有节点（索引 -> DOM）
     this.renderIndex = 0;  // 渲染索引（保留兼容性）
 
-
-
     $container.html(`
         <div class="waterfall-list-scroll" style="">
           <div class="waterfall-list-viewport"></div>
         </div>
       `);
 
+
+
+    // 如果有定义loading函数  那么创建一个loading节点元素
+    if (options.createLoading) {
+        this.$loadingNode = $(
+            `<div class="waterfall-loading" style="transform: translate(0px, -99999px)"></div>`
+        );
+        $container.find('.waterfall-list-viewport').append(this.$loadingNode);
+
+        options.createLoading(this.$loadingNode);
+    }
+
     // 绑定滚动事件（节流处理）
     $container.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
@@ -681,6 +697,49 @@ Waterfall.prototype.updatePointCards = function () {
     }
 }
 
+// 展示loading的回调函数
+Waterfall.prototype.showLoading = function (callback = null) {
+    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)
+}
+
+// 隐藏loading的回调函数
+Waterfall.prototype.hideLoading = function (callback = null) {
+    const options = this.options;
+    const $container = $(options.container);
+    let $node = null
+    if (this.$loadingNode) {
+        let h1 = this.getMaxHeight() + options.marginBottom
+        this.$loadingNode.css('transform', `translate(0px,-99999px)`);
+        //如果要设置高度，那么这里判断一下当前是否正在做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');
+                }
+            }
+        })
+        $node = this.$loadingNode
+    }
+
+    if (callback) callback($node)
+}
 
 function createDefaultRow({ top, left }) {
     return {

package/components/waterfall/waterfall.scss

@@ -0,0 +1,17 @@
+.waterfall-list-scroll {
+  height: 100%;
+  .waterfall-loading {
+    position: absolute;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  .waterfall-item {
+    flex: 1;
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 0;
+    width: 100%;
+    position: absolute;
+  }
+}

package/package.json

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