链接: vue-seamless-scroll插件文档

1. 安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 引入

1、main.js全局引入

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

2、局部引入

import vueSeamlessScroll from 'vue-seamless-scroll'components: {vueSeamlessScroll},

3. 使用

<div class="divBox"><vue-seamless-scrollv-if="statusData.length > 0":data="statusData":class-option="scrollStatus(statusData)"><divv-for="(item, index) in statusData":key="index"></div></vue-seamless-scroll>
</div>computed: {scrollStatus() {return (arr) => {return {step: 0.3, // 数值越大速度滚动越快limitMoveNum: arr.length, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: false, // 是否开启鼠标悬停stop// direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};};},
}//最外层容器需要手动设置width、height、overflow:hidden
.divBox{height: 250px;width:300px;overflow: hidden;
}