用插槽实现公告栏垂直滚动，核心是父组件自由定义内容、子组件专注滚动逻辑；默认插槽承载动态内容，作用域插槽支持数据回传与交互定制，需确保容器固定高度与正确溢出设置。
用插槽实现公告栏垂直滚动，核心是把公告内容交给父组件自由定义，子组件只负责滚动逻辑和容器结构。插槽不参与动画，但为内容提供灵活注入点，滚动行为由 CSS 或 JS 控制。
默认插槽承载动态内容
公告栏通常只需一个内容区，用默认插槽最简洁。子组件中写<slot></slot>作为内容挂载点，父组件传入任意结构的公告项（文字、图标、时间戳等），无需预设格式。
- 子组件模板示例：
<div class="notice-scroll"><slot></slot></div> - 父组件使用时可传入列表、单条消息或带样式的 div 块，插槽会原样渲染
- 注意：插槽内容必须是直接子节点，不能套在 template 或 v-if 容器里再塞入，否则可能无法被正确分发
滚动容器需手动控制高度与溢出
垂直滚动依赖容器固定高度 + overflow-y: auto 或 JavaScript 滚动动画。插槽本身不提供滚动能力，只是内容载体。
- 给外层容器设固定高度（如
height: 120px）并启用纵向滚动：.notice-scroll { height: 120px; overflow-y: scroll; } - 若需无缝轮播效果，可在子组件内用
setInterval配合scrollTop或 CSS 动画位移，每次滚动前确保插槽内容已渲染完成 - 监听
scroll事件判断是否到底部，触发加载下一批公告（配合插槽内容更新）
结合作用域插槽增强交互能力
当每条公告需要绑定点击、状态或来源数据时，用作用域插槽把数据“反传”给父组件，让父组件决定如何渲染每一条。
- 子组件中：
<slot v-for="item in list" :key="item.id" :item="item"></slot> - 父组件使用：
<template #default="{ item }"><div @click="goDetail(item)">{{ item.title }}</div></template> - 这样每条公告的样式、事件、图标都由父组件掌控，子组件只管滚动节奏和顺序
避免常见空白问题
滚动区域显示为空，大概率不是插槽没生效，而是内容未正确进入滚动容器流或被隐藏。
- 检查插槽内容是否被包裹在 display: none / visibility: hidden 的父元素中
- 确认容器没有设置
overflow: hidden且高度为 0 或 auto（需明确高度才能触发滚动条） - 若用 v-show 切换公告列表，需确保 DOM 已插入后再触发动画；v-if 重建时要重置 scrollTop
- Web Components 场景下，
<slot>必须位于 shadow DOM 内，且外部内容必须是 light DOM 直接子节点
