--- theme: smartblue highlight: an-old-hope --- ## SeamlessScroll 组件介绍 ### 功能说明 `SeamlessScroll` 是一个实现无缝滚动效果的 Vue 3 组件，主要功能包括： 1. **无缝垂直滚动**：支持向上或向下无缝滚动内容 2. **可控制滚动速度**：通过 `speed` 属性调整滚动速度 3. **可控制滚动方向**：通过 `direction` 属性设置向上('up')或向下('down')滚动 4. **鼠标悬停暂停**：鼠标悬停时自动暂停滚动，移开后继续 5. **动态内容同步**：自动同步两个滚动容器的内容，确保无缝衔接 6. **重置功能**：提供 [reset](file://f:\work\医保智能场景监管系统\jd-data-dashboard\src\components\SeamlessScroll.vue#L115-L118) 方法可重置滚动位置 ### 组件源码 ```js ``` ### 使用方法 #### 基本用法 ```vue ``` #### 属性说明 | 属性名 | 类型 | 默认值 | 说明 | |-------|------|--------|------| | speed | Number | 1000 | 滚动速度，数值越大滚动越慢 | | direction | String | 'up' | 滚动方向，可选 'up' 或 'down' | #### 方法说明 | 方法名 | 说明 | |-------|------| | reset() | 重置滚动位置到初始状态 | #### 调用方法示例 ```vue ``` ### 工作原理该组件通过以下方式实现无缝滚动效果： 1. 创建两个相同的滚动容器（[refRoll1](file://f:\work\医保智能场景监管系统\jd-data-dashboard\src\components\SeamlessScroll.vue#L14-L14) 和 [refRoll2](file://f:\work\医保智能场景监管系统\jd-data-dashboard\src\components\SeamlessScroll.vue#L15-L15)） 2. 使用 `requestAnimationFrame` 实现高性能动画 3. 通过 CSS `transform: translate3d()` 控制两个容器的位置 4. 当一个容器完全移出视野时，将其移动到另一个容器的末尾 5. 通过不断更新 `top` 值实现滚动效果 6. 利用 `clientHeight` 计算容器高度，确保内容无缝衔接 ### 注意事项 1. 确保父容器有明确的高度设置 2. 滚动内容需要有明确的高度 3. 组件会自动隐藏滚动条 4. 鼠标悬停可临时暂停滚动效果