fix(notice-bar): resolve console error (#2470)

* fix(notice-bar): resolve console error * fix(notice-bar): cannot retrieve the 't-notice-bar__content' node
Tencent · Dec 19, 2023 · 7f9346c · 7f9346c
1 parent 9cdae57
commit 7f9346c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 26 deletions.
diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js
@@ -5,7 +5,21 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = ['align', 'banner', 'base', 'bordered', 'custom', 'label', 'layout', 'maxlength', 'prefix', 'size', 'special', 'status', 'suffix'];
+const mapper = [
+  'align',
+  'banner',
+  'base',
+  'bordered',
+  'custom',
+  'label',
+  'layout',
+  'maxlength',
+  'prefix',
+  'size',
+  'special',
+  'status',
+  'suffix',
+];
 
 describe('Input', () => {
   mapper.forEach((demoName) => {

diff --git a/src/notice-bar/notice-bar.less b/src/notice-bar/notice-bar.less
@@ -43,6 +43,7 @@
   }
 
   &__content--vertical {
+    display: block;
     height: @notice-bar-line-height;
     line-height: @notice-bar-line-height;
 

diff --git a/src/notice-bar/notice-bar.ts b/src/notice-bar/notice-bar.ts
@@ -97,29 +97,31 @@ export default class NoticeBar extends SuperComponent {
       const warpID = `.${name}__content-wrap`;
       const nodeID = `.${name}__content`;
       getAnimationFrame(this, () => {
-        Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
-          const { marquee } = this.properties;
-
-          if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) {
-            return;
-          }
-
-          if (marquee || wrapRect.width < nodeRect.width) {
-            const speeding = marquee.speed || 50;
-            const delaying = marquee.delay || 0;
-            const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000;
-            const firstAnimationDuration = (nodeRect.width / speeding) * 1000;
-            this.setData({
-              wrapWidth: Number(wrapRect.width),
-              nodeWidth: Number(nodeRect.width),
-              animationDuration: animationDuration,
-              delay: delaying,
-              loop: marquee.loop - 1,
-              firstAnimationDuration: firstAnimationDuration,
-            });
-            marquee.loop !== 0 && this.startScrollAnimation(true);
-          }
-        });
+        Promise.all([getRect(this, nodeID), getRect(this, warpID)])
+          .then(([nodeRect, wrapRect]) => {
+            const { marquee } = this.properties;
+
+            if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width) {
+              return;
+            }
+
+            if (marquee || wrapRect.width < nodeRect.width) {
+              const speeding = marquee.speed || 50;
+              const delaying = marquee.delay || 0;
+              const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000;
+              const firstAnimationDuration = (nodeRect.width / speeding) * 1000;
+              this.setData({
+                wrapWidth: Number(wrapRect.width),
+                nodeWidth: Number(nodeRect.width),
+                animationDuration: animationDuration,
+                delay: delaying,
+                loop: marquee.loop - 1,
+                firstAnimationDuration: firstAnimationDuration,
+              });
+              marquee.loop !== 0 && this.startScrollAnimation(true);
+            }
+          })
+          .catch(() => {});
       });
     },
 

diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml
@@ -26,7 +26,7 @@
         circular="true"
         interval="{{interval}}"
         display-multiple-items="1"
-        class="{{classPrefix}}__content--vertical"
+        class="{{classPrefix}}__content {{classPrefix}}__content--vertical"
         bindchange="onChange"
       >
         <block wx:for="{{content}}" wx:key="index">

diff --git a/src/rate/__test__/demo.test.js b/src/rate/__test__/demo.test.js
@@ -5,7 +5,18 @@
 import path from 'path';
 import simulate from 'miniprogram-simulate';
 
-const mapper = ['action', 'base', 'color', 'count', 'custom', 'custom-prefix', 'show-text', 'size', 'special', 'un-filled'];
+const mapper = [
+  'action',
+  'base',
+  'color',
+  'count',
+  'custom',
+  'custom-prefix',
+  'show-text',
+  'size',
+  'special',
+  'un-filled',
+];
 
 describe('Rate', () => {
   mapper.forEach((demoName) => {