更新记录

1.0.0（2025-07-09） 下载此版本

项目中用到的功能

平台兼容性

uni-app(4.29)

Text Scroll 文本滚动组件

组件介绍

text-scroll 是一个用于显示长文本内容的滚动组件，当文本内容超出容器宽度时，会自动启用水平滚动动画效果。

功能特性

• ✅ 自动检测文本是否超出容器宽度
• ✅ 超出时自动启用平滑滚动动画
• ✅ 支持自定义滚动延迟时间
• ✅ 支持标题显示
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 性能优化，使用 requestAnimationFrame 实现流畅动画

使用方法

基础用法

<template>
  <text-scroll 
    title="公告" 
    textContent="这是一条很长的公告内容，当内容超出容器宽度时会自动滚动显示"
  />
</template>

<script>
import TextScroll from '@/components/text-scroll/index.vue'

export default {
  components: {
    TextScroll
  }
}
</script>

自定义延迟时间

<template>
  <text-scroll 
    title="通知" 
    textContent="这是一条很长的通知内容"
    :delay="2000"
  />
</template>

参数说明

组件结构

scroll-container
├── title (标题)
└── scroll-wrapper
    └── scroll-content
        ├── text (原始文本)
        └── text (重复文本，用于无缝滚动)

工作原理

1. 溢出检测: 组件挂载后自动检测文本是否超出容器宽度
2. 动画启动: 当检测到溢出时，延迟指定时间后开始滚动动画
3. 无缝滚动: 通过重复显示文本内容实现无缝循环滚动效果
4. 性能优化: 使用 requestAnimationFrame 确保动画流畅性

样式定制

组件使用 SCSS 编写样式，主要样式类：

• .scroll-container: 外层容器
• .title: 标题样式
• .scroll-wrapper: 滚动容器
• .scroll-content: 滚动内容区域

注意事项

1. 组件会自动检测文本溢出，无需手动控制
2. 滚动动画仅在文本超出容器时启动
3. 组件会在销毁时自动清理动画定时器
4. 当 textContent 发生变化时会重新检测溢出状态

示例场景

• 公告栏显示
• 新闻标题滚动
• 状态信息展示
• 通知消息轮播

兼容性

• 支持 uni-app 框架
• 兼容 H5、小程序、App 等多端
• 响应式设计，适配不同屏幕尺寸