fix(Message): 修复message重复进入位置异常 (#2711)

Tencent · Apr 22, 2024 · 155504c · 155504c
1 parent 501f44e
commit 155504c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 141 deletions.
diff --git a/src/dialog/README.md b/src/dialog/README.md
@@ -48,7 +48,7 @@ isComponent: true
 
 {{ command }}
 
-#### 开发能力按钮
+#### 开放能力按钮
 
 当传入的按钮类型为对象时，整个对象都将透传至 `t-button`，因此按钮可以直接使用开放能力
 

diff --git a/src/message/message-item/index.ts b/src/message/message-item/index.ts
diff --git a/src/message/message-item/message.ts b/src/message/message-item/message.ts
@@ -40,8 +40,6 @@ export default class Message extends SuperComponent {
     prefix,
     classPrefix: name,
     loop: -1,
-    animation: [],
-    showAnimation: [],
     wrapTop: -999, // 初始定位，保证在可视区域外。
     fadeClass: '',
   };
@@ -77,20 +75,11 @@ export default class Message extends SuperComponent {
     },
   };
 
-  /** 延时关闭句柄 */
-  closeTimeoutContext = 0;
-
-  /** 动画句柄 */
-  nextAnimationContext = 0;
-
-  resetAnimation = wx.createAnimation({
-    duration: 0,
-    timingFunction: 'linear',
-  });
-
-  ready() {
-    this.memoInitialData();
-  }
+  lifetimes = {
+    ready() {
+      this.memoInitialData();
+    },
+  };
 
   /** 记录组件设置的项目 */
   memoInitialData() {
@@ -104,67 +93,6 @@ export default class Message extends SuperComponent {
     this.setData({ ...this.initialData }, cb);
   }
 
-  detached() {
-    this.clearMessageAnimation();
-  }
-
-  /** 检查是否需要开启一个新的动画循环 */
-  checkAnimation() {
-    const { marquee } = this.properties;
-    if (!marquee || marquee.loop === 0) {
-      return;
-    }
-
-    const speeding = marquee.speed;
-
-    if (this.data.loop > 0) {
-      this.data.loop -= 1;
-    } else if (this.data.loop === 0) {
-      // 动画回到初始位置
-      this.setData({ animation: this.resetAnimation.translateX(0).step().export() });
-      return;
-    }
-
-    if (this.nextAnimationContext) {
-      this.clearMessageAnimation();
-    }
-
-    const warpID = `#${name}__text-wrap`;
-    const nodeID = `#${name}__text`;
-    Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
-      this.setData(
-        {
-          animation: this.resetAnimation.translateX(wrapRect.width).step().export(),
-        },
-        () => {
-          const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
-          const nextAnimation = wx
-            .createAnimation({
-              // 默认50px/s
-              duration: durationTime,
-            })
-            .translateX(-nodeRect.width)
-            .step()
-            .export();
-
-          // 这里就只能用 setTimeout/20, nextTick 没用
-          // 不用这个的话会出现reset动画没跑完就开始跑这个等的奇怪问题
-          setTimeout(() => {
-            this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime) as unknown as number;
-
-            this.setData({ animation: nextAnimation });
-          }, 20);
-        },
-      );
-    });
-  }
-
-  /** 清理动画循环 */
-  clearMessageAnimation() {
-    clearTimeout(this.nextAnimationContext);
-    this.nextAnimationContext = 0;
-  }
-
   show(offsetHeight: number = 0) {
     const { duration, marquee, offset, id } = this.properties;
     this.setData({
@@ -173,8 +101,6 @@ export default class Message extends SuperComponent {
       fadeClass: `${name}__fade`,
       wrapTop: unitConvert(offset[0]) + offsetHeight,
     });
-    this.reset();
-    this.checkAnimation();
     if (duration && duration > 0) {
       this.closeTimeoutContext = setTimeout(() => {
         this.hide();
@@ -192,27 +118,17 @@ export default class Message extends SuperComponent {
   }
 
   hide() {
-    this.reset();
     this.setData({
       fadeClass: `${name}__fade`,
     });
     setTimeout(() => {
-      this.setData({ visible: false, animation: [] });
+      this.setData({ visible: false });
     }, SHOW_DURATION);
     if (typeof this.onHide === 'function') {
       this.onHide();
     }
   }
 
-  // 重置定时器
-  reset() {
-    if (this.nextAnimationContext) {
-      this.clearMessageAnimation();
-    }
-    clearTimeout(this.closeTimeoutContext);
-    this.closeTimeoutContext = 0;
-  }
-
   handleClose() {
     this.hide();
     this.triggerEvent('close-btn-click');

diff --git a/src/message/message-item/message.wxs b/src/message/message-item/message.wxs
@@ -10,7 +10,7 @@ var changeNumToStr = function (arr) {
 
 var getMessageStyles = function (zIndex, offset, wrapTop) {
   var arr = changeNumToStr(offset || [0, 0]);
-  var left = arr[0] || 0;
+  var left = arr[1] || 0;
   var right = arr[1] || 0;
 
   var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';

diff --git a/src/message/message.ts b/src/message/message.ts
@@ -30,9 +30,17 @@ export default class Message extends SuperComponent {
 
   observers = {};
 
-  ready() {
-    this.memoInitialData();
-  }
+  pageLifetimes = {
+    show() {
+      this.hideAll();
+    },
+  };
+
+  lifetimes = {
+    ready() {
+      this.memoInitialData();
+    },
+  };
 
   /** 记录组件设置的项目 */
   memoInitialData() {