vue3-seamless-scroll 无线滚动

安装

npm

npm install vue3-seamless-scroll --save

yarn

yarn add vue3-seamless-scroll

全局注册

 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');

或者单文件注册

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

使用组件：

数组listData

list 无缝滚动列表数据，组件内部使用列表长度。

  type: Array
  required: true

v-model 通过v-model控制动画滚动与停止，默认开始滚动

  type: Boolean,
  default: true,
  required: false

direction 控制滚动方向，可选值up，down，left，right

  type: String,
  default: "up",
  required: false

isWatch 开启数据更新监听

  type: Boolean,
  default: true,
  required: false

hover 是否开启鼠标悬停

  type: Boolean,
  default: false,
  required: false

count 动画循环次数，默认无限循环

  type: Number,
  default: "infinite",
  required: false

limitScrollNum 开启滚动的数据量，只有列表长度大于等于该值才会滚动

  type: Number,
  default: 5,
  required: false

step 步进速度

  type: Number,
  required: false

singleHeight 单步运动停止的高度

  type: Number,
  default: 0,
  required: false

singleWidth 单步运动停止的宽度

  type: Number,
  default: 0,
  required: false

singleWaitTime 单步停止等待时间(默认值 1000ms)

  type: Number,
  default: 1000,
  required: false

isRemUnit

singleHeight and singleWidth 是否开启 rem 度量

  type: Boolean,
  default: true,
  required: false

delay 动画延时时间

  type: Number,
  default: 0,
  required: false

ease 动画效果，可以传入贝塞尔曲线数值

  type: String | cubic-bezier,
  default: "ease-in",
  required: false

注意使用组件时候父组件一定要写 overflow:hidden