tencent.jquery.pix.component 1.0.64 → 1.0.66

package/components/waterfall/waterfall.js

@@ -42,6 +42,8 @@ export function Waterfall(optionsInput = {}) {
 
     this.$loadingNode = null;
 
+    this.isShowLoading = false;  // 是否展示loading
+
 
     // 间隔字符串转数字
     if (options.columnGap.constructor === String) {
@@ -125,6 +127,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 +143,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 +154,7 @@ Waterfall.prototype.init = function () {
     }
 
     // 绑定滚动事件（节流处理）
-    $container.off().on('scroll', function () {
+    $scrollDom.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
 
         window.requestAnimationFrame(() => {
@@ -162,7 +166,7 @@ Waterfall.prototype.init = function () {
         }
     });
 
-    this.scrollTop = $container.scrollTop();  // 当前滚动位置
+    this.scrollTop = $scrollDom.scrollTop();  // 当前滚动位置
 
     // 首次渲染
     self.updateVisibleItems();
@@ -417,8 +421,9 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
 
     // 如果没有更多数据需要渲染
     if (nextDataId === null) {
-        const maxHeight = this.getMaxHeight();
-        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        // const maxHeight = this.getMaxHeight();
+        // $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        this.setScrollHeight();
         return;
     }
 
@@ -429,8 +434,7 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
     }
 
     if (this.renderIndex >= options.data.length) {
-        const maxHeight = this.getMaxHeight();
-        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        this.setScrollHeight();
         return
     }
 
@@ -514,8 +518,9 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
             this.createCards({ end });
         });
     } else {
-        const maxHeight = this.getMaxHeight();
-        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        // const maxHeight = this.getMaxHeight();
+        // $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        this.setScrollHeight();
     }
 }
 
@@ -695,24 +700,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
@@ -722,19 +726,35 @@ 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');
-                }
-            }
+            // 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",
   "description": "",
   "main": "index.js",
   "files": [