Vue.js自动滚动组件实现指南 SeamlessAutoScroll 自动滚动

使用示例

<template>
  <div class="demo-wrapper">
    <SeamlessAutoScroll ref="srollCompRef1" :speed="4" @reset-before="onResetBefore" @scroll-end="onScrollEnd" @scrollStart="onScrollStart">
      <div v-for="item in items" :key="item.id" class="news-item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </SeamlessAutoScroll>
  </div>
  <div class="demo-wrapper">
  <SeamlessAutoScroll :speed="20" :interval="[95, 2000]">
    <div v-for="item in items" :key="item.id" class="news-item">
      <h3>{{ item.title }}</h3>
      <p>{{ item.content }}</p>
    </div>
  </SeamlessAutoScroll>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { SeamlessAutoScroll, SeamlessAutoScrollInstance } from 'seam-auto-scroll';
const srollCompRef1 = shallowRef<SeamlessAutoScrollInstance>();

function onScroll(v: number) {
    // console.log(v);
}
function onScrollStart(v: number) {
    console.log(v, 'onScrollStart');
    // srollCompRef1.value?.stopAutoScroll(); 
}
function onScrollEnd(v: number) {
    console.log(v);
    // srollCompRef1.value?.stopAutoScroll(); 
}

function onResetBefore(currentTop, needsScroll, _domUpdate, next) {
    needsScroll ? next(currentTop) : next(0)
}

const items = ref(
    Array.from({ length: 20 }, (_, i) => ({
    id: i,
    title: `News Item ${i + 1}`,
    content: 'This is a sample news content. '.repeat(10 + Math.floor(Math.random() * 10))
    }))
);
</script>

<style>
.demo-wrapper {
  height: 400px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
}

.news-item {
  padding: 15px;
  margin: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
</style>

Event

function onScroll(v: number): void;
function onScrollStart(v: number): void;
function onScrollEnd(v: number): void;
/**
 * @currentTop {number} 当前top
 * @needsScroll {boolean} 是否要滚动
 * @domUpdate {boolean} dom 发生变化
 * @next 设置位置重新执行下一步
 * @example @resetBefore="(currentTop, needsScroll, next) => needsScroll ? next(currentTop) : next(0)"
 */
function onResetBefore(currentTop: number, needsScroll: boolean, domUpdate: boolean, next: (v: number) => void): void;

Action

/**
 * 暂停滚动
 */
function pauseScroll(): void;
/**
 * 开始滚动
 */
function startAutoScroll(): void;
/**
 * 停止滚动
 */
function stopAutoScroll(): void;
/**
 * 延迟多少秒重新滚动
 */
function resetResumeTimer(resumeTime: number): void;

/**
 * 设置top
 */
function setScrollTop(value: number);