diff --git a/.changeset/olive-ligers-attack.md b/.changeset/olive-ligers-attack.md new file mode 100644 index 0000000000..0939bfecd5 --- /dev/null +++ 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 index 4cfb253a34..34b738465c 100644 --- 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 index bc8f894223..34d7d3a987 100644 --- 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 index 65fa93f773..6f7ea972fa 100644 --- 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,8 +45,29 @@ export default ({ } }, [texts]); + const lineHeight = inModal ? 25 : 19; + /** 两组数据解决轮播后面会空白的问题 */ + const textList = [...texts, ...texts]; + const content = textList?.map((item: string, index: number) => ( +
+ )); + return ( -
+
- {texts?.map((item: string, index: number) => ( -
- ))} -
+ {content}
);