vue3-seamless-scroll Vue3 无缝滚动组件

目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。

官方地址

vue3参考地址  https://github.com/xfy520/vue3-seamless-scroll

vue2参考地址 04 - 滚动速度 | vue-seamless-scroll

vue2使用  vue-seamless-scroll

安装

npm install vue3-seamless-scroll --save

全局注册

  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

局部注册 引入使用即可

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

使用

注意：需要滚动的列表所在容器必须设置样式 overflow: hidden;

<template>
  <vue3-seamless-scroll :list="list" class="scroll" :hover="true">
    <div class="item" v-for="(item, index) in list" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </vue3-seamless-scroll>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
    const list = ref([
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第6条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第7条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第8条",
        date: Date.now(),
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第9条",
        date: Date.now(),
      },
    ]);
</script>

<style>
.scroll {
  height: 270px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

组件配置

配置参数	注释	默认值	类型	必填
list	无缝滚动列表数据，组件内部使用列表长度		Array	是
v-model	通过v-model控制动画滚动与停止	true	Boolean	否
direction	控制滚动方向，可选值up，down，left，right	up	String	否
isWatch	开启数据更新监听	true	Boolean	否
hover	是否开启鼠标悬停	false	Boolean	否
count	动画循环次数，默认无限循环	infinite	Number	否
limitScrollNum	开启滚动的数据量，只有列表长度大于等于该值才会滚动	5	Number	否
step	步进速度		Number	否
singleHeight	单步运动停止的高度	0	Number	否
singleWidth	单步运动停止的宽度	0	Number	否
singleWaitTime	单步停止等待时间(默认值 1000ms)	1000	Number	否
isRemUnit	singleHeight and singleWidth 是否开启 rem 度量	true	Boolean	否
delay	动画延时时间	0	Number	否
ease	动画效果，可以传入贝塞尔曲线数值cubic-bezier	ease-in	String	否
copyNum	拷贝列表次数，默认拷贝一次，当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果	1	Number	否
wheel	在开启鼠标悬停的情况下是否开启滚轮滚动，默认不开启	false	Boolean	否
singleLine	启用单行横向滚动	false	Boolean	否