tencent.jquery.pix.component 1.0.63-beta.3 → 1.0.63-beta.5

package/components/banner/banner.js

@@ -1,7 +1,9 @@
 import "./banner.scss"
-import { $, windowEnv } from "../config";
+import { windowEnv, getEnv } from "../config";
 import { addResizeFunc, nextAnimationFrame, removeResizeFunc } from "../utils/utils";
 
+let $ = null;
+
 /**
  * 在页面上放置一个banner组件
  * @constructor
@@ -17,7 +19,9 @@ import { addResizeFunc, nextAnimationFrame, removeResizeFunc } from "../utils/ut
  * @param {function} [options.pageChanged] 翻页时触发，第一个参数为新生效页面元素的jq，第二个参数为 options.list 中对应的项，第三个参数为当前页码
  * @param {function} [options.renderCallback] 自定义渲染回调，第一个参数为 options.list 中对应的项，第二个参数为当前页码，返回值为渲染后的元素
  */
-export function Banner(options = {}){
+export function Banner(options = {}) {
+    $ = getEnv().$;
+
     this.options = options;
     this.options.isTitleEnabled ??= true;
     this.options.autoResize ??= true;
@@ -30,7 +34,7 @@ export function Banner(options = {}){
     this.init();
 }
 
-Banner.prototype.setWidth = function(width) {
+Banner.prototype.setWidth = function (width) {
     this.signWidth = width;
     this.allWidth = this.signWidth * (this.options.list.length + 2);
     $(this.options.container).width(width);
@@ -39,7 +43,7 @@ Banner.prototype.setWidth = function(width) {
     this.setTranslate(-this.signWidth * (this.index + 1));
 }
 
-Banner.prototype.fitWidth = function() {
+Banner.prototype.fitWidth = function () {
     console.log('banner fitWidth');
     const newWidth = $(this.options.container).parent().width();
     if (newWidth != this.signWidth) {
@@ -50,7 +54,7 @@ Banner.prototype.fitWidth = function() {
 /**
  * 跳转到上一页
  */
-Banner.prototype.prevPage = async function() {
+Banner.prototype.prevPage = async function () {
     this.pauseAutoPlay();
     await this.gotoPageUnchecked(this.index - 1);
     this.startAutoPlay();
@@ -59,7 +63,7 @@ Banner.prototype.prevPage = async function() {
 /**
  * 跳转到下一页
  */
-Banner.prototype.nextPage = async function() {
+Banner.prototype.nextPage = async function () {
     this.pauseAutoPlay();
     await this.gotoPageUnchecked(this.index + 1);
     this.startAutoPlay();
@@ -69,7 +73,7 @@ Banner.prototype.nextPage = async function() {
  * 跳转到指定页
  * @param {number} newIdx 要切换到的页码 [0, len)
  */
-Banner.prototype.gotoPage = async function(newIdx) {
+Banner.prototype.gotoPage = async function (newIdx) {
     if (newIdx < 0 || newIdx >= this.options.list.length) {
         throw new Error('index out of range');
     }
@@ -81,7 +85,7 @@ Banner.prototype.gotoPage = async function(newIdx) {
     this.startAutoPlay();
 }
 
-Banner.prototype.gotoPageUnchecked = async function(newIdx) {
+Banner.prototype.gotoPageUnchecked = async function (newIdx) {
     const len = this.options.list.length;
     let wrap = 0;
     if (newIdx <= -1) {
@@ -100,14 +104,14 @@ Banner.prototype.gotoPageUnchecked = async function(newIdx) {
     }
 
     this.$inner.css('transition', 'transform 0.3s ease-out');
-    const newTranslate = -this.signWidth * (newIdx+1);
+    const newTranslate = -this.signWidth * (newIdx + 1);
     this.setTranslate(newTranslate);
     if (this.options.isTitleEnabled) {
-        this.$pagination.children().eq(newIdx+1).addClass('active').siblings().removeClass('active');
+        this.$pagination.children().eq(newIdx + 1).addClass('active').siblings().removeClass('active');
         this.$titleBox.text(this.options.list[newIdx].title);
     }
     if (this.options.pageChanged && newIdx != this.index) {
-        this.options.pageChanged(this.$inner.children().eq(newIdx+1), this.options.list[newIdx], newIdx);
+        this.options.pageChanged(this.$inner.children().eq(newIdx + 1), this.options.list[newIdx], newIdx);
     }
     this.index = newIdx;
 }
@@ -116,11 +120,11 @@ Banner.prototype.gotoPageUnchecked = async function(newIdx) {
  * 获取当前页的序号
  * @returns {number} 当前页的序号 [0,len]
  */
-Banner.prototype.getCurrentPage = function() {
+Banner.prototype.getCurrentPage = function () {
     return this.index;
 }
 
-Banner.prototype.init = function(){
+Banner.prototype.init = function () {
     const $t = $(this.options.container)
     console.log('banner container:', $t.dom);
     const signWidth = $t.width()
@@ -139,10 +143,10 @@ Banner.prototype.init = function(){
         });
     }
     this.startAutoPlay();
-    console.log('list:', this.options.list, ' signWidth:',signWidth)
+    console.log('list:', this.options.list, ' signWidth:', signWidth)
 }
 
-Banner.prototype.startAutoPlay = function() {
+Banner.prototype.startAutoPlay = function () {
     if (this.options.durationMs > 0 && this.timer == null) {
         this.timer = setInterval(() => {
             this.nextPage()
@@ -150,7 +154,7 @@ Banner.prototype.startAutoPlay = function() {
     }
 }
 
-Banner.prototype.pauseAutoPlay = function() {
+Banner.prototype.pauseAutoPlay = function () {
     if (this.timer == null) {
         return;
     }
@@ -158,25 +162,25 @@ Banner.prototype.pauseAutoPlay = function() {
     this.timer = null;
 }
 
-Banner.prototype.createHtml = function(){
+Banner.prototype.createHtml = function () {
     const len = this.options.list.length
-    if(len<1){
+    if (len < 1) {
         return
     }
     const $t = $(this.options.container)
     $t.empty();
     const signWidth = this.signWidth = $t.width()
-    
+
     const allWidth = this.allWidth = signWidth * (len + 2)
     const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
     this.currentTranslate = -signWidth * (this.index + 1)
-    $inner.width(allWidth).css('transform',`translateX(${this.currentTranslate}px)`)
+    $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
 
     // 加第0个位置
-    $inner.append(`<div class="banner-inner-li" data-background-url="${this.options.list[len-1].url}" style="width:${this.signWidth}px;">
+    $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++){
+    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;">
             </div>
@@ -210,7 +214,7 @@ Banner.prototype.createHtml = function(){
         this.$titleBox = $titleBox
         this.$pagination = $pagination
 
-        $pagination.children().eq(this.index+1).addClass('active').siblings().removeClass('active')
+        $pagination.children().eq(this.index + 1).addClass('active').siblings().removeClass('active')
 
         $t.append($pagination)
     }
@@ -223,21 +227,21 @@ Banner.prototype.createHtml = function(){
 /**
  * 由 this.options.renderCallback 生成页面
  */
-Banner.prototype.createCustomHtml = function() {
+Banner.prototype.createCustomHtml = function () {
     const len = this.options.list.length
-    if(len<1){
+    if (len < 1) {
         return
     }
     const $t = $(this.options.container)
     $t.empty();
     const signWidth = this.signWidth = $t.width()
-    
+
     const allWidth = this.allWidth = signWidth * (len + 2)
     const $inner = this.$inner = $(`<div class="banner-inner-transform"></div>`)
     this.currentTranslate = -signWidth * (this.index + 1)
-    $inner.width(allWidth).css('transform',`translateX(${this.currentTranslate}px)`)
+    $inner.width(allWidth).css('transform', `translateX(${this.currentTranslate}px)`)
 
-    let $li = $(this.options.renderCallback(this.options.list[len-1], len-1));
+    let $li = $(this.options.renderCallback(this.options.list[len - 1], len - 1));
     $li.width(signWidth);
     $inner.append($li);
 
@@ -254,7 +258,7 @@ Banner.prototype.createCustomHtml = function() {
     $t.append($inner);
 }
 
-Banner.prototype.bindEvent = function(){
+Banner.prototype.bindEvent = function () {
     const self = this
     const len = this.options.list.length;
     const $inner = this.$inner;
@@ -317,7 +321,7 @@ Banner.prototype.bindEvent = function(){
             } else if (newTranslate < -this.signWidth * len) {
                 newTranslate += this.signWidth * len;
             }
-            
+
             // 在移动到新位置前，先变换当前位置到正确区域
             await this.normalizeTranslate();
         } else {
@@ -325,7 +329,7 @@ Banner.prototype.bindEvent = function(){
         }
 
         $inner.css('transition', 'transform 0.3s ease-out')
-        $inner.css('transform',`translateX(${this.currentTranslate}px)`);
+        $inner.css('transform', `translateX(${this.currentTranslate}px)`);
 
         if (newTranslate !== this.currentTranslate) {
             this.setTranslate(newTranslate);
@@ -335,11 +339,11 @@ Banner.prototype.bindEvent = function(){
         // 由于 newTranslate 包含了前后的循环占位（位置 0 和 len+1 ），需要减1后取模
         const newIndex = (Math.round(-newTranslate / this.signWidth) + len - 1) % len;
         if (this.options.isTitleEnabled) {
-            this.$pagination.children().eq(newIndex+1).addClass('active').siblings().removeClass('active');
+            this.$pagination.children().eq(newIndex + 1).addClass('active').siblings().removeClass('active');
             this.$titleBox.text(this.options.list[newIndex].title);
         }
         if (this.options.pageChanged && newIndex != this.index) {
-            this.options.pageChanged(this.$inner.children().eq(newIndex+1), this.options.list[newIndex], newIndex);
+            this.options.pageChanged(this.$inner.children().eq(newIndex + 1), this.options.list[newIndex], newIndex);
         }
         this.index = newIndex;
         this.startAutoPlay();
@@ -350,15 +354,15 @@ Banner.prototype.bindEvent = function(){
     if (windowEnv === 'h5') { // 浏览器环境
         $inner
             .attr('draggable', 'false')
-            .on('pointerdown', function(e) {
+            .on('pointerdown', function (e) {
                 pStart(e.originalEvent.clientX, () => {
                     this.setPointerCapture(e.originalEvent.pointerId);
                 });
             })
-            .on('pointermove', function(e) {
+            .on('pointermove', function (e) {
                 pMove(e.originalEvent.clientX);
             })
-            .on('pointerup', async function(e) {
+            .on('pointerup', async function (e) {
                 await pEnd(() => {
                     this.releasePointerCapture(e.originalEvent.pointerId);
                 });
@@ -380,23 +384,23 @@ Banner.prototype.bindEvent = function(){
     $inner.on('transitionend', () => {
         $inner.css('transition', 'none');
     })
-    .on('click', function(e){
-        if(!self.options.click){
-            return 
-        }
-        if (windowEnv === 'h5' && Math.abs(e.clientX - originalX) > 10) {
-            // 防止浏览器中拖动时触发click
-            return
-        }
+        .on('click', function (e) {
+            if (!self.options.click) {
+                return
+            }
+            if (windowEnv === 'h5' && Math.abs(e.clientX - originalX) > 10) {
+                // 防止浏览器中拖动时触发click
+                return
+            }
 
-        const $t = self.$inner.children().eq(self.index + 1);
-        self.options.click($t, self.options.list[self.index], self.index);
-    });
+            const $t = self.$inner.children().eq(self.index + 1);
+            self.options.click($t, self.options.list[self.index], self.index);
+        });
 }
 
 Banner.prototype.setTranslate = function (transX) {
     this.currentTranslate = transX;
-    this.$inner.css('transform',`translateX(${this.currentTranslate}px)`);
+    this.$inner.css('transform', `translateX(${this.currentTranslate}px)`);
 }
 
 /**
@@ -420,7 +424,7 @@ Banner.prototype.normalizeTranslate = async function () {
  * 加载所有背景图片，将data-background-url属性设置为背景图片
  */
 Banner.prototype.loadAllBackgrounds = function () {
-    this.$inner.children().each(function() {
+    this.$inner.children().each(function () {
         $(this).css('background-image', `url(${$(this).attr('data-background-url')})`)
     });
     // console.log('banner images loaded');

package/components/list/list.js

@@ -1,4 +1,7 @@
-import { $, windowEnv } from "../config";
+import { getEnv } from "../config";
+
+let $ = null;
+
 // 默认配置
 const DEFAULTS = {
     itemHeight: 50,       // 单条数据高度
@@ -14,6 +17,8 @@ const DEFAULTS = {
 };
 
 export function List(options = {}) {
+    $ = getEnv().$;
+
     this.options = Object.assign({}, DEFAULTS, options);
     // 标记是否有更新元素用的回调函数
     this.hasUpdateItem = options.updateItem && (options.updateItem.constructor === Function) ? true : false;

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();
@@ -604,7 +620,7 @@ Waterfall.prototype.updateCard = function (data) {
 
     const $node = this.activeNodes.get(dataId);
     const height = $node.height();
-    console.log('Waterfall: updateCard height', height);
+
     // 重新计算该数据所在列的卡片位置
     let needUpdate = false
     const columnItems = this.columnItems;
@@ -619,9 +635,8 @@ Waterfall.prototype.updateCard = function (data) {
                 bool = true
                 const oldHeight = row.bottom - row.top;
 
-                console.log('Waterfall: updateCard oldHeight', oldHeight);
                 minus = height - oldHeight;
-                console.log('Waterfall: updateCard minus', minus);
+
                 if (minus === 0) {
                     // 找到了原节点数据，对比后没有变更 那么直接退出
                     return;
@@ -682,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/package.json

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