vue3 vue-seamless-scroll

最近开发过程中做大屏的页面，需求用到无缝滚动列表，发现一个特别好用的插件，分享给大家，欢迎评论区讨论话题。

针对于vue3版本

1. npm install vue-seamless-scroll@1.1.23 安装无缝滚动插件

如果报错则添加--legacy-peer-deps指令，进行强制安装

1. 在main.js中引用vue-seamless-scroll/src一定要添加/src，vue3版本引用插件不同处

   
   （图片来源网络，侵删）

import vueSeamless from "vue-seamless-scroll/src";
createApp(App).use(store).use(router).use(vueSeamless).mount("#app");

1. 完整实例代码

• {{ item.title }}：{{ item.time }}

export default { name: "scroll", data() { return { listData: [], }; }, // 监听属性 类似于data概念 computed: { defaultOption() { return { step: 0.8, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 200, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000, // 单步运动停止的时间(默认值1000ms) }; }, }, mounted() { for (let i = 1; i

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。