当前位置：首页 > React

react实现滚动消息

2026-01-27 07:07:50React

实现滚动消息的方法

使用React实现滚动消息可以通过多种方式完成，常见的有CSS动画、JavaScript定时器或第三方库。以下是几种实现方法：

使用CSS动画和`transform`

通过CSS的@keyframes和transform属性实现平滑滚动效果。

import React from 'react';
import './ScrollMessage.css';

const ScrollMessage = ({ messages }) => {
  return (
    <div className="scroll-container">
      <div className="scroll-content">
        {messages.map((msg, index) => (
          <div key={index} className="message">{msg}</div>
        ))}
      </div>
    </div>
  );
};

export default ScrollMessage;

.scroll-container {
  overflow: hidden;
  height: 100px;
}

.scroll-content {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.message {
  padding: 10px;
}

使用`setInterval`和状态管理

通过JavaScript的定时器动态更新消息位置。

import React, { useState, useEffect } from 'react';

const ScrollMessage = ({ messages }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % messages.length);
    }, 2000);
    return () => clearInterval(interval);
  }, [messages.length]);

  return (
    <div style={{ height: '50px', overflow: 'hidden' }}>
      <div style={{ transform: `translateY(-${currentIndex * 50}px)` }}>
        {messages.map((msg, index) => (
          <div key={index} style={{ height: '50px' }}>{msg}</div>
        ))}
      </div>
    </div>
  );
};

export default ScrollMessage;

使用第三方库（如`react-fast-marquee`）

利用现成的滚动组件快速实现功能。

react实现滚动消息

import React from 'react';
import Marquee from 'react-fast-marquee';

const ScrollMessage = ({ messages }) => {
  return (
    <Marquee speed={50} gradient={false}>
      {messages.join(' | ')}
    </Marquee>
  );
};

export default ScrollMessage;