最近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, // 单步运动停止时间
};
},
}