更新记录

1.0.0（2026-03-27） 下载此版本

首次发布

• 实现内容超出时自动滚动，未超出时静止
• 支持自定义滚动速度、延迟、间距
• 无缝循环滚动，无视觉跳跃
• 支持左侧图标、右侧关闭按钮
• 支持点击跳转
• 兼容 H5、微信小程序、App 端

平台兼容性

uni-app(3.7.2)

# sea-scroll-notice 超越公告栏

## 特性

- ✅ **真正“超出才滚动”** – 文本宽度 ≤ 容器宽度时静止，超出时自动平滑滚动
- ✅ **循环无跳跃** – 无缝循环滚动，视觉连贯
- ✅ **无初始闪现** – 复制文本仅在需要滚动时渲染，切换内容时不闪烁
- ✅ **间距可控** – 支持自定义原始文本与复制文本之间的间距（rpx）
- ✅ **速度/延迟可调** – 滚动速度、启动延迟自由配置
- ✅ **鼠标悬停暂停** – H5 端支持悬停暂停，提升体验
- ✅ **左右插槽** – 支持自定义左侧图标、右侧关闭按钮
- ✅ **点击跳转** – 支持点击整个公告栏跳转页面
- ✅ **全端兼容** – 已测试 H5、微信小程序、App 端

## 安装

1. 在插件市场点击“下载”或“使用 HBuilderX 导入插件”
2. 在页面中直接引用组件

## 基本用法

```vue
<template>
  <view>
    <!-- 短文本：不滚动，无复制内容 -->
    <sea-scroll-notice text="系统通知" :showIcon="true" />

    <!-- 长文本：自动滚动，间距40rpx，速度8秒/圈 -->
    <sea-scroll-notice
      text="这是一条非常非常非常长的通知内容，超出宽度时会自动滚动显示。"
      :showIcon="true"
      :showClose="true"
      bgColor="#f5f5f5"
      padding="20rpx 30rpx"
      fontSize="28"
      color="#666"
      :speed="8"
      :delay="500"
      :gap="40"
      @click="handleClick"
      @close="handleClose"
    />
  </view>
</template>

<script>
import SeaScrollNotice from '@/components/sea-scroll-notice/sea-scroll-notice.vue'
export default {
  components: { SeaScrollNotice },
  methods: {
    handleClick() { console.log('点击公告') },
    handleClose() { console.log('关闭公告') }
  }
}
</script>

Props

插槽

事件