fix: lego组件解决文字滚动组件不能无缝连接问题

thundersdata-frontend · Nov 9, 2023 · 2017a1d · 2017a1d
1 parent 5d70073
commit 2017a1d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 44 deletions.
diff --git a/.changeset/olive-ligers-attack.md b/.changeset/olive-ligers-attack.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+fix: lego组件解决文字滚动组件不能无缝连接问题
diff --git a/packages/lego/src/text-scroll/index.less b/packages/lego/src/text-scroll/index.less
@@ -1,4 +1,5 @@
 .td-lego-text-scroll-list {
+  padding-bottom: 1px;
   &:hover {
     animation-play-state: paused !important;
   }

diff --git a/packages/lego/src/text-scroll/index.md b/packages/lego/src/text-scroll/index.md
@@ -11,14 +11,14 @@ group:
 
 ## API
 
-| 属性         | 必填    | 说明                                   | 类型            | 默认值  |
-| ------------ | ------- | -------------------------------------- | --------------- | ------- |
-| texts        | `true`  | 文字数组                               | `string[]`      |         |
-| scrollSpeed  | `false` | 滚动速度，通过时间控制，单位 s         | `number`        | `5`     |
-| delay        | `false` | 文字滚动的延迟时间，单位 s             | `number`        | `2`     |
-| textStyle    | `false` | 文字的样式                             | `CSSProperties` |         |
-| contentStyle | `false` | 内容的样式，主要用于设置文字滚动的高度 | `CSSProperties` |         |
-| inModal      | `false` | 是否在弹窗中                           | `boolean`       | `false` |
+| 属性 | 必填 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- | --- |
+| texts | `true` | 文字数组 | `string[]` |  |
+| scrollSpeed | `false` | 滚动速度，通过时间控制，单位 s | `number` | `5` |
+| delay | `false` | 文字滚动的延迟时间，单位 s | `number` | `2` |
+| textStyle | `false` | 文字的样式 | `CSSProperties` |  |
+| contentStyle | `false` | 内容的样式，主要用于设置文字滚动的高度, 高度最好设置为数据 \* 单个数据的高度，可以实现无缝轮播 | `CSSProperties` |  |
+| inModal | `false` | 是否在弹窗中 | `boolean` | `false` |
 
 ## 效果图 1
 

diff --git a/packages/lego/src/text-scroll/index.tsx b/packages/lego/src/text-scroll/index.tsx
@@ -26,17 +26,17 @@ export default ({
   inModal = false,
 }: TextScrollProps) => {
   const theme = useTheme();
+
   useEffect(() => {
     if (texts.length > 0) {
       const node = document.getElementById('list');
-      const extraNode = document.getElementById('extra');
       const runKeyframes = `
         @keyframes scroll {
           0% {
-            transform: translate(0, 0);
+            transform: translateY(0);
           }
           100% {
-            transform: translate(0, -${(node?.clientHeight ?? 0) - (extraNode?.clientHeight ?? 0)}px);
+            transform: translateY(-50%);
           }
         }`;
       const style = document.createElement('style');
@@ -45,47 +45,37 @@ export default ({
     }
   }, [texts]);
 
+  const lineHeight = inModal ? 25 : 19;
+  /** 两组数据解决轮播后面会空白的问题 */
+  const textList = [...texts, ...texts];
+  const content = textList?.map((item: string, index: number) => (
+    <div
+      key={index}
+      style={
+        {
+          color: theme.colors.gray50,
+          ...theme.typography[inModal ? 'p0' : 'p2'],
+          lineHeight: `${lineHeight}px`,
+          textIndent: '2em',
+          wordSpacing: -0.7,
+          marginBottom: 7,
+          ...textStyle,
+        } as CSSProperties
+      }
+      dangerouslySetInnerHTML={{ __html: decodeHTML(item) }}
+    ></div>
+  ));
+
   return (
-    <div style={{ height: 220, overflow: 'hidden', ...contentStyle }}>
+    <div style={{ height: lineHeight * texts?.length, overflow: 'hidden', ...contentStyle }}>
       <div
         id="list"
         style={{
           animation: `scroll ${scrollSpeed}s ${delay}s linear infinite`,
         }}
         className="td-lego-text-scroll-list"
       >
-        {texts?.map((item: string, index: number) => (
-          <div
-            key={index}
-            style={
-              {
-                color: theme.colors.gray50,
-                ...theme.typography[inModal ? 'p0' : 'p2'],
-                lineHeight: inModal ? '25px' : '19px',
-                textIndent: '2em',
-                wordSpacing: -0.7,
-                marginBottom: 7,
-                ...textStyle,
-              } as CSSProperties
-            }
-            dangerouslySetInnerHTML={{ __html: decodeHTML(item) }}
-          ></div>
-        ))}
-        <div
-          id="extra"
-          style={
-            {
-              color: theme.colors.gray50,
-              ...theme.typography[inModal ? 'p0' : 'p2'],
-              lineHeight: inModal ? '25px' : '19px',
-              textIndent: '2em',
-              wordSpacing: -0.7,
-              marginBottom: 7,
-              ...textStyle,
-            } as CSSProperties
-          }
-          dangerouslySetInnerHTML={{ __html: decodeHTML(texts?.[0]) }}
-        ></div>
+        {content}
       </div>
     </div>
   );