上下滚动,当前内容文字超过屏幕宽度时,会把当前文字向左移动,看完后,再向下滚动到下一条文字。
直接上代码:
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(() =>