更新记录

1.0.0（2026-09-09） 下载此版本

1. 首次发布：通知/公告滚动组件
2. 两种滚动方向：vertical 垂直逐条切换（无缝回跳）、horizontal 横向无缝跑马灯
3. 图标：内置默认喇叭图标（无需依赖项目资源），icon 属性可传入任意图片地址或传 "" 隐藏，也可用 #icon 插槽完全自定义
4. 滚动时间可配置：interval 控制垂直模式单条停留时长、duration 控制垂直切换动画时长 / 水平整屏循环时长
5. 文案/样式可配：field 指定取值字段、height 行高与整体高度、backgroundColor、borderRadius、textColor、fontSize
6. 支持 click 事件回传点击项，支持空列表自动隐藏

平台兼容性

uni-app(5.24)

其他

Notice Scroll 通知滚动条

一款基于 uni-app（Vue3）的通知/公告滚动组件。左侧图标可替换，支持垂直逐条切换与水平无缝跑马灯两种滚动方向，停留间隔与滚动时长均可配置，开箱即用。

🚀 功能特性

• ✅ 两种滚动方向：vertical 上下逐条切换（首尾无缝回跳）、horizontal 横向无缝跑马灯（内容自动复制两份，translateX(-50%) 循环）
• ✅ 图标可替换：内置默认喇叭图标（随组件打包，无需依赖项目资源）；icon 属性可传入任意图片地址，或用 #icon 插槽完全自定义（emoji / 文字 / 自定义视图）；显式传 icon="" 可隐藏图标
• ✅ 滚动时间可修改：interval 控制垂直模式单条停留时长，duration 控制垂直切换动画时长 / 水平整屏循环一圈用时
• ✅ 文案取值灵活：通过 field 指定从列表项中取哪个字段作为展示文案，默认兼容 { newsTitle } 结构
• ✅ 样式可配：整体高度（兼作行高）、背景色、圆角、文案颜色、字号均可配置
• ✅ 交互回传：点击列表项通过 click 事件回传当前项，跳转逻辑由业务侧处理
• ✅ 空列表自动隐藏：不传数据或数据为空时不渲染任何内容
• ✅ 多端适配：纯 view/text + flex/transform 实现，适配 H5 / App-vue / 小程序

📦 安装引入

1. 将 uni_modules/notice-scroll 整个目录复制到项目的 uni_modules 目录下；
2. 开启 easycom 时可直接使用 <notice-scroll> 标签，无需手动引入；
3. 若未开启 easycom，可在页面中手动引入：

<script setup>
import NoticeScroll from "@/uni_modules/notice-scroll/components/notice-scroll/notice-scroll.vue";
</script>

🚀 快速开始

<template>
  <view>
    <!-- 垂直逐条切换：沿用默认外观，传数据即可 -->
    <notice-scroll :list="notices" :icon="hornIcon" @click="goDetail" />

    <!-- 横向无缝跑马灯：direction="horizontal"，duration 控制循环一圈时长 -->
    <notice-scroll
      :list="notices"
      :icon="hornIcon"
      direction="horizontal"
      :duration="10000"
      :interval="0"
      @click="goDetail"
    />

    <!-- 隐藏图标 / 自定义文案字段 / 自定义配色（不传 icon 则显示内置喇叭图标） -->
    <notice-scroll
      :list="alerts"
      field="content"
      icon=""
      background-color="#FFF7E6"
      border-radius="8rpx"
      height="72rpx"
      text-color="#FA8C16"
      font-size="24rpx"
      @click="goDetail"
    />
  </view>
</template>

<script setup>
const notices = [
  { newsTitle: "BTC 上线永续合约，欢迎体验" },
  { newsTitle: "系统将于 2026-09-12 02:00 进行升级维护" },
  { newsTitle: "新用户注册即享 100 USDT 体验金" },
];
const goDetail = (item) => {
  console.log("点击了：", item.newsTitle);
};
</script>

🔧 Props 属性配置

数据与方向

滚动时间（重点）

外观样式

📡 事件

🎨 插槽

<notice-scroll :list="notices">
  <template #icon>
    <text style="font-size: 30rpx">📢</text>
  </template>
</notice-scroll>

🎨 样式自定义

组件内部类可在外部覆盖（scoped 样式需 :deep() 穿透）：

<style lang="scss" scoped>
:deep(.ns-bar) {
  border: 1px solid #e5e6eb;
}
</style>

⚠️ 使用注意事项

1. 垂直滚动无缝回跳原理：组件会在列表末尾自动追加一条首项副本，滚动到副本后关闭过渡瞬间归位，肉眼不可见跳变，无需业务侧拼接数据
2. 水平滚动无缝原理：内容自动复制两份，动画 translateX(-50%) 循环；请勿自行在 list 里拼接重复数据，否则循环周期会翻倍
3. duration 与 direction 语义不同：垂直=切换动画时长（毫秒级），水平=整屏循环时长（秒级量级），传值前请按方向确认
4. 避免与组件标签同名：页面（<script setup>）内不要定义与标签同名的局部变量（如 noticeScroll），否则 Vue 编译时局部变量优先于组件，<notice-scroll> 会被解析成局部变量
5. 数据实时更新：list 变化（含深层次修改）会自动重置垂直滚动并重新开始计时；水平滚动基于 CSS 动画，数据中途更新会以当前动画继续运行
6. list 为空时组件不渲染，无需再额外做 v-if 空态判断

📞 更新日志

见 changelog.md。

祝您使用愉快！ 🎉