文字跑马灯

上下滚动，当前内容文字超过屏幕宽度时，会把当前文字向左移动，看完后，再向下滚动到下一条文字。

直接上代码：

import React, { useImperativeHandle, useRef, useState, useEffect } from "react";
import { useMount } from "ahooks";
import styles from './style.module.scss'
import classNames from 'classnames/bind'
const relationObj = {};
const Marquee = React.forwardRef(
(props, pRef) => {
const {
array,
waitSecond = 5,
waitNextSecond = 2,
rolling = true,
speedTimes = 1,
behindfix,
...otherProps
} = props;
const cx = classNames.bind(styles); //样式引用，替换成自己的即可
const ref = React.createRef();
const sRef = React.createRef();
useImperativeHandle(pRef, () => ref.current);
const [curText, setText] = useState(array[0]);
const [index, setIndex] = useState(array[0]);
useMount(() => {
relationObj[`${behindfix}`] = {};
relationObj[`${behindfix}`].index = 0;
relationObj[`${behindfix}`].timer = null;
});
useEffect(() => {
startMove(sRef);
return () => clearInterval(relationObj[`${behindfix}`].timer);
}, [curText, array, index]);
const startMove = (rollingText) => {
if (!rolling) return;
if (ref && ref.current && rollingText && rollingText.current && curText) {
const { clientWidth } = ref.current;
const span = rollingText.current;
const { offsetWidth } = span;
const rollingDistance = offsetWidth - clientWidth;
span.style.transform = `translateX(-${0}px)`;
const animationName = `rolling${
behindfix + new Date().getTime().toString()
}`;
const animationTime =
rollingDistance > 0
? Math.ceil(rollingDistance / (30 * speedTimes))
: waitSecond - waitNextSecond;
// css3 动画规则
const rollingTextAnimation = `@keyframes ${animationName} {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(-${rollingDistance}px);
-webkit-transform: translateX(-${rollingDistance}px);
}
}`;
const { length } = document.styleSheets[0].cssRules;
if (!relationObj[`${behindfix}`].cssRulerIndex) {
relationObj[`${behindfix}`].cssRulerIndex = length;
document.styleSheets[0].insertRule(
rollingTextAnimation,
relationObj[`${behindfix}`].cssRulerIndex
);
} else {
// 添加新规则前，删除原来的规则
document.styleSheets[0].deleteRule(
relationObj[`${behindfix}`].cssRulerIndex
);
document.styleSheets[0].insertRule(
rollingTextAnimation,
relationObj[`${behindfix}`].cssRulerIndex
);
}
span.style.animation = `${animationName} ${
animationTime === waitSecond ? 0 : animationTime
}s linear`;
if (rollingDistance > 0)
span.style.transform = `translateX(-${rollingDistance}px)`;
relationObj[`${behindfix}`].timer = setInterval(() => {
relationObj[`${behindfix}`].index += 1;
setText(array[relationObj[`${behindfix}`].index % array.length]);
// 针对只有一条数据的情况，特殊处理
if (array.length === 1) {
setIndex(relationObj[`${behindfix}`].index);
}
}, animationTime * 1000 + waitNextSecond * 1000);
} else {
relationObj[`${behindfix}`].timer = setInterval(() => {
setText(array[relationObj[`${behindfix}`].index % array.length]);
}, 0);
}
};
return (
<div className={cx("rolling-text-contain")} ref={ref} {...otherProps}>
<span className={cx("rolling-text")} ref={sRef}>
{curText}
</span>
</div>
);
}
);
export default Marquee;

样式：

.rolling-text-contain {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.rolling-text {
display: inline-block;
height: 100%;
color: #ffffff;
font-size: 12px;
}

父组件使用：

<Marquee array={
['asdkfjlasdkf',
'start playing. i want to bet wala. how about you, guys.start playing. i want to bet wala. how about you, guys.',
'kuhdfjand68790-987']
}
/>

最后

以上就是优雅棒棒糖为你收集整理的文字跑马灯的全部内容，希望文章能够帮你解决文字跑马灯所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。