当前位置：首页 > React

react实现滚动新闻列表

2026-01-27 13:18:32React

实现滚动新闻列表的基本思路

使用React实现滚动新闻列表可以通过CSS动画或JavaScript定时控制两种方式完成。核心逻辑是通过动态更新数据或样式，模拟新闻条目的向上滚动效果。

CSS动画实现方案

利用CSS的@keyframes和transform属性实现平滑滚动效果，React负责数据渲染：

react实现滚动新闻列表

import React, { useState } from 'react';
import './NewsTicker.css';

function NewsTicker({ items }) {
  return (
    <div className="ticker-container">
      <div className="ticker-content">
        {items.map((item, index) => (
          <div key={index} className="ticker-item">{item}</div>
        ))}
        {/* 复制一份实现无缝循环 */}
        {items.map((item, index) => (
          <div key={`copy-${index}`} className="ticker-item">{item}</div>
        ))}
      </div>
    </div>
  );
}

配套CSS文件（关键部分）：

.ticker-container {
  height: 60px;
  overflow: hidden;
  position: relative;
}

.ticker-content {
  position: absolute;
  animation: scroll 20s linear infinite;
}

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

.ticker-item {
  height: 60px;
  display: flex;
  align-items: center;
}

JavaScript定时控制方案

通过setInterval动态更新数据实现更灵活的控制：

react实现滚动新闻列表

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

function NewsTicker({ items }) {
  const [displayItems, setDisplayItems] = useState(items);

  useEffect(() => {
    const interval = setInterval(() => {
      setDisplayItems(prev => {
        const newItems = [...prev];
        const firstItem = newItems.shift();
        return [...newItems, firstItem];
      });
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ height: '60px', overflow: 'hidden' }}>
      {displayItems.map((item, index) => (
        <div key={index} style={{ height: '60px' }}>{item}</div>
      ))}
    </div>
  );
}

性能优化建议

对于大量新闻数据，建议使用虚拟滚动技术。以下是简化实现示例：

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

function VirtualScrollTicker({ items }) {
  const [startIndex, setStartIndex] = useState(0);
  const containerRef = useRef(null);
  const visibleCount = 5;

  useEffect(() => {
    const interval = setInterval(() => {
      setStartIndex(prev => (prev + 1) % items.length);
    }, 1000);
    return () => clearInterval(interval);
  }, [items.length]);

  const visibleItems = [];
  for (let i = 0; i < visibleCount; i++) {
    const index = (startIndex + i) % items.length;
    visibleItems.push(items[index]);
  }

  return (
    <div ref={containerRef} style={{ height: `${visibleCount * 60}px`, overflow: 'hidden' }}>
      {visibleItems.map((item, i) => (
        <div key={i} style={{ height: '60px' }}>{item}</div>
      ))}
    </div>
  );
}

完整组件示例

结合动画和暂停功能的增强版实现：

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

function AdvancedNewsTicker({ items, speed = 50 }) {
  const [isPaused, setIsPaused] = useState(false);
  const containerRef = useRef(null);
  const contentRef = useRef(null);
  const animationRef = useRef(null);
  const positionRef = useRef(0);

  useEffect(() => {
    const animate = () => {
      if (!isPaused) {
        positionRef.current -= 1;
        contentRef.current.style.transform = `translateY(${positionRef.current}px)`;

        if (-positionRef.current >= contentRef.current.clientHeight / 2) {
          positionRef.current = 0;
        }
      }
      animationRef.current = requestAnimationFrame(animate);
    };

    animationRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationRef.current);
  }, [isPaused]);

  return (
    <div 
      ref={containerRef}
      style={{ 
        height: '60px',
        overflow: 'hidden',
        position: 'relative'
      }}
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      <div 
        ref={contentRef}
        style={{
          position: 'absolute',
          width: '100%'
        }}
      >
        {items.map((item, i) => (
          <div key={i} style={{ height: '60px' }}>{item}</div>
        ))}
        {items.map((item, i) => (
          <div key={`clone-${i}`} style={{ height: '60px' }}>{item}</div>
        ))}
      </div>
    </div>
  );
}