安装:
npm install vue3-seamless-scroll
全局部署:main.ts
import vue3SeamlessScroll from 'vue3-seamless-scroll'
app.use(vue3SeamlessScroll)
到页面使用
<template>
<div class="header">
<vue3-seamless-scroll
class="seamless-warp scroll"
:list="plansData.data" //对应循环的数据
:step="0.8" //速度
:hover="true" //点击是否暂停
style="width: 100%"
v-model="isScroll"
>
<div class="box" v-for="(item, index) in plansData.data" :key="index">
</div>
</vue3-seamless-scroll>
</div>
</template>
<script>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const isScroll = ref(true) //默认true开始滚动
</script>
<style>
.seamless-warp scroll {
height: 300px;
width: 100%;
overflow: scroll;
}
.header {
height: 100%;
overflow: hidden;
}
</style>
其它功能可参考利用vue3SeamlessScroll简单实现列表的无限循环滚动,仅需几秒配置_vue3 表格循环滚动-CSDN博客