fix: noticebar 垂直滚动初始化时,无法及时展示元素信息 (jdf2e#1576)

Co-authored-by: oasis-cloud <suanbanren@foxmail.com>

Author: xiaoyatong

src/packages/noticebar/demo.taro.tsx

@@ -65,18 +65,18 @@ const NoticeBarDemo = () => {
 
         <h2>{translated.scrollable}</h2>
         <NoticeBar content={translated.textShort} scrollable />
-        <br />
+        <br style={{ display: 'block', height: '10px' }} />
         <NoticeBar content={translated.text} scrollable={false} />
 
         <h2>{translated.mode}</h2>
         <NoticeBar closeable onClick={hello}>
           {translated.text}
         </NoticeBar>
-        <br />
+        <br style={{ display: 'block', height: '10px' }} />
         <NoticeBar closeable rightIcon={<CircleClose />} onClick={hello}>
           {translated.text}
         </NoticeBar>
-        <br />
+        <br style={{ display: 'block', height: '10px' }} />
         <NoticeBar
           leftIcon={
             <img

src/packages/noticebar/noticebar.scss

@@ -32,6 +32,7 @@
     }
 
     .left-icon {
+      display: flex;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-lefticon-margin;

src/packages/noticebar/noticebar.taro.tsx

@@ -119,7 +119,9 @@ export const NoticeBar: FunctionComponent<
       childCount,
     }
   }, [children])
+  // 滚动消息的总高度
   let trackSize = childCount * Number(height)
+  // 设置最小偏移量（最后一条的偏移位置）
   const minOffset = (() => {
     if (rect) {
       const base = isVertical ? rect.height : rect.width
@@ -134,9 +136,7 @@ export const NoticeBar: FunctionComponent<
         scrollList.current = [].concat(childs)
       } else {
         scrollList.current = [].concat(list)
-        setTimeout(() => {
-          startRollEasy()
-        }, Number(duration))
+        startRollEasy()
       }
     } else {
       initScrollWrap(content)
@@ -297,11 +297,9 @@ export const NoticeBar: FunctionComponent<
 
   useEffect(() => {
     if (isVertical && children) {
-      setTimeout(() => {
-        init()
-        stopAutoPlay()
-        autoplay()
-      }, 300)
+      init()
+      stopAutoPlay()
+      autoplay()
     }
   }, [children, container?.current])
 
@@ -366,6 +364,9 @@ export const NoticeBar: FunctionComponent<
 
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current
+    if (!target) {
+      return
+    }
     let _offset = 0
     // 容器高度-元素高度
     const val = (rect?.height || 0) - height

src/packages/noticebar/noticebar.tsx

@@ -360,6 +360,9 @@ export const NoticeBar: FunctionComponent<
 
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current
+    if (!target) {
+      return
+    }
     let _offset = 0
     // 容器高度-元素高度
     const val = rect.height - height