🌟 轻量级高性能 React 跑马灯组件 @zhou96/marquee 使用指南

4_0_4
216 阅读2分钟

在现代 Web 应用中，跑马灯效果是展示滚动通知、广告横幅或重要信息的常见 UI 组件。今天，我很高兴向大家推荐一个我开发的轻量级、高性能的 React 跑马灯组件 -  @zhou96/marquee。这个组件不仅功能强大，而且使用简单，能够满足各种滚动展示需求。

核心特性

  • 🚀 轻量级：零依赖，体积小巧
  • 📱 响应式：自动适应容器宽度变化
  • 🎯 智能滚动：支持溢出检测，仅在内容超出容器时滚动
  • ⏸️ 悬停暂停：鼠标悬停时可暂停滚动
  • 🎨 高度可定制：支持自定义样式、滚动速度和方向
  • 🔄 双向滚动：支持从左到右或从右到左滚动
  • 💪 TypeScript 支持：完整的类型定义

安装

bash
# 使用 npm
npm install @zhou96/marquee

# 或使用 yarn
yarn add @zhou96/marquee

# 或使用 pnpm
pnpm add @zhou96/marquee

基础用法

tsx
import Marquee from '@zhou96/marquee';
import "@zhou96/marquee/dist/style.css";

function App() {
  return (
    <div style={{ width: '300px' }}>
      <Marquee>
        这是一条会滚动的跑马灯消息，当内容超出容器宽度时会自动滚动
      </Marquee>
    </div>
  );
}

高级用法

自定义滚动方向

tsx
<Marquee direction="right">
  这条消息会从右向左滚动
</Marquee>

控制滚动速度

tsx
<Marquee speed={30}> {/* 数值越大滚动越快 */}
  自定义滚动速度的消息
</Marquee>

悬停时暂停

tsx
<Marquee pauseOnHover={true}>
  鼠标悬停时我会暂停滚动
</Marquee>

仅当内容溢出时滚动

tsx
<Marquee overflowOnly={true}>
  只有当我的内容超出容器宽度时才会滚动
</Marquee>

技术实现解析

@zhou96/marquee

 使用纯 CSS 动画实现滚动效果，性能高效。核心实现包括：

  1. 使用 

    useEffect

     监听容器和内容宽度的变化

  2. 动态计算动画持续时间和滚动距离

  3. 通过 CSS 变量控制动画参数

  4. 响应式设计，自动适应容器尺寸变化

性能优化

  • 智能渲染：仅在内容超出容器时应用动画
  • 防抖处理：窗口大小变化时优化性能
  • CSS 动画：利用硬件加速，确保流畅滚动

浏览器兼容性

支持所有现代浏览器，包括 Chrome、Firefox、Safari 和 Edge 的最新版本。

结语

@zhou96/marquee

 是一个简单易用但功能强大的 React 跑马灯组件，适用于各种滚动展示场景。无论是展示通知、广告还是其他需要滚动显示的内容，它都能完美胜任。如果你正在寻找一个轻量级、高性能的跑马灯解决方案，不妨试试 

@zhou96/marquee

！你可以在这里查看在线示例：CodeSandbox 演示

欢迎在 GitHub 上提交 issue 或 PR，一起完善这个项目！

avatar
文章
阅读
粉丝