vue滚动到指定位置,有滚动效果（Vue3无缝滚动—-vue3-seamless-scroll）

在一些大屏可视化项目中    
    
    
    
    
，经常会用到滚动的样式  
    
    
    
    
。

安装

npm install vue3-seamless-scroll --save

main.js中引入

import vue3SeamlessScroll from vue3-seamless-scroll; const app = createApp(App); app.use(vue3SeamlessScroll)

使用

<vue3-seamless-scroll hover-stop="true" :list="listData" hover="true" step="0.3"> <div v-for="(item, index) in listData" :key="index" class="item" style="padding: 10px; margin: 5px; font-size: 14px"> <span v-for="(value, key, ind) in item" :key="ind" class="spanClass">{{ value }}</span> </div> </vue3-seamless-scroll>

组件配置

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

指南在这里