SeamlessScroll 无缝滚动

SeamlessScroll 无缝滚动 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { SeamlessScroll } from "@/components/page/seamless-scroll";

const demoProps = {
  data: [{ name: "报价审核" }, { name: "材料同步" }, { name: "流程完成" }],
  classOption: { step: 0.5, limitMoveNum: 2 },
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <SeamlessScroll v-bind="demoProps">
        <div v-for="item in demoProps.data" :key="item.name" class="demo-line">{{ item.name }}</div>
      </SeamlessScroll>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { SeamlessScroll } from "@/components/page/seamless-scroll";

Props

参数	说明	类型	默认值	必填
data	数据	Recordable[]	-	是
classOption	配置	ClassOption	-	是

Events

事件名	说明	回调参数
scrollEnd	滚动结束事件	-

Slots

插槽名	说明	参数
left-switch	left-switch 内容插槽。	-
right-switch	right-switch 内容插槽。	-
default	默认内容插槽。	-

Expose

名称	说明	类型
reset	重置组件状态。	-

Module API

名称	说明	类型
SeamlessScroll	导出 SeamlessScroll 供业务侧复用。	useInstall(index)

Types

SeamlessScrollProps

导出 SeamlessScrollProps 供业务侧复用。

字段	说明	类型	默认值	必填
data	数据	Recordable[]	-	是
classOption	配置	ClassOption	-	是

ClassOption

导出 ClassOption 供业务侧复用。

字段	说明	类型	默认值	必填
key	ref key	number	-	否
step	步长	number	-	否
limitMoveNum	启动无缝滚动最小数据数	number	-	否
hoverStop	是否启用鼠标hover控制	boolean	-	否
direction	bottom 往下 top 往上(默认) left 向左 right 向右	string	-	否
openTouch	开启移动端 touch	boolean	-	否
singleHeight	单条数据高度有值 hoverStop 关闭	number	-	否
singleWidth	单条数据宽度有值 hoverStop 关闭	number	-	否
waitTime	单步停止等待时间	number	-	否
switchOffset	偏移量	number	-	否
autoPlay	是否自动播放	boolean	-	否
navigation	是否暂停播放	boolean	-	否
switchSingleStep	单步距离	number	-	否
switchDelay	切换模式延迟	number	-	否
switchDisabledClass	滚动元素的 class	string	-	否
isSingleRemUnit	singleWidth/singleHeight 是否开启 rem 度量	boolean	-	否

SeamlessScrollEmits

导出 SeamlessScrollEmits 供业务侧复用。

字段	说明	类型	默认值	必填
scrollEnd	滚动结束事件	[]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。