vue无缝滚动------vue-seamless-scroll

443 阅读1分钟

最近vue项目中有需要无缝滚动场景,实测有效,分享一下。

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2、man.js引入

import scroll from 'vue-seamless-scroll';Vue.use(scroll)

 3、页面引入组件

 <vue-seamless-scroll :data="scrollData" :class-option="optionHover" >
</vue-seamless-scroll>

4、参数配置

computed: { 
  optionHover() {     
     return {        
       step: 0.3, // 数值越大滚动速度越大        
       limitMoverNum: 2, // 开始无缝滚动大的数量      
       hoverStop: true, // 鼠标悬停stop        
       direction: 1, // 0向下,1向上,2向左,3向右       
       openWatch: true, // 开启数据实时监控刷新dom        
       singleHeight: 0, // 单步运动停止高度,默认0无缝不停滚动       
       singleWidth: 0, // 单步运动停止宽度,默认0无缝不停滚动        
       waitTime: 2500, // 单步运动停止时间      
     };    
  },  
}

5、如果还想了解更多可以点击深入学习 进入到对应的插件演示文档进行学习呀