fix: noticebar 修复小程序多行展示问题 (#1107)

jdf2e · Jun 9, 2023 · 95ed2f3 · 95ed2f3
1 parent 89b953e
commit 95ed2f3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/src/packages/noticebar/noticebar.scss b/src/packages/noticebar/noticebar.scss
@@ -67,7 +67,6 @@
       }
     }
 
-    // 只跑一次
     .play {
       animation: nut-notice-bar-play linear both running;
     }
@@ -93,14 +92,12 @@
     }
   }
 
-  // 垂直方向的滚动
   @keyframes nut-notice-bar-play-vertical {
     to {
       transform: translateY($noticebar-height);
     }
   }
 
-  // 纵向
   .nut-noticebar-vertical {
     position: relative;
     display: flex;

diff --git a/src/packages/noticebar/noticebar.taro.tsx b/src/packages/noticebar/noticebar.taro.tsx
@@ -425,9 +425,8 @@ export const NoticeBar: FunctionComponent<
     'nut-noticebar-page': true,
     withicon: closeable,
     close: closeable,
-    wrap,
+    wrapable: wrap,
   })
-
   useEffect(() => {
     return () => {
       stopAutoPlay()

diff --git a/src/packages/noticebar/noticebar.tsx b/src/packages/noticebar/noticebar.tsx
@@ -253,10 +253,8 @@ export const NoticeBar: FunctionComponent<
     height / speed / 4 < 1
       ? Number((height / speed / 4).toFixed(1))
       : ~~(height / speed / 4)
-
   const noDuring =
     height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed)
-
   const horseLampStyle = {
     transition: animate
       ? `all ${duringTime === 0 ? noDuring : duringTime}s`
@@ -359,7 +357,6 @@ export const NoticeBar: FunctionComponent<
 
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current
-
     let _offset = 0
     // 容器高度-元素高度
     const val = rect.height - height
@@ -418,7 +415,6 @@ export const NoticeBar: FunctionComponent<
     }
   }
 
-  // const b = bem('noticebar')
   const noticebarClass = classNames({
     'nut-noticebar-page': true,
     withicon: closeable,
@@ -466,24 +462,22 @@ export const NoticeBar: FunctionComponent<
         >
           {leftIcon ? <div className="left-icon">{leftIcon}</div> : null}
           {children ? (
-            <>
-              <div className="nut-noticebar__inner" ref={innerRef}>
-                {scrollList.current.map((item: string, index: number) => {
-                  return (
-                    <div
-                      className="scroll-inner "
-                      style={itemStyle(index)}
-                      key={index}
-                      onClick={(e) => {
-                        handleItemClick(e, item)
-                      }}
-                    >
-                      {item}
-                    </div>
-                  )
-                })}
-              </div>
-            </>
+            <div className="nut-noticebar__inner" ref={innerRef}>
+              {scrollList.current.map((item: string, index: number) => {
+                return (
+                  <div
+                    className="scroll-inner "
+                    style={itemStyle(index)}
+                    key={index}
+                    onClick={(e) => {
+                      handleItemClick(e, item)
+                    }}
+                  >
+                    {item}
+                  </div>
+                )
+              })}
+            </div>
           ) : (
             <div className="horseLamp_list" style={horseLampStyle}>
               {scrollList.current.map((item: string, index: number) => {