vue-seamless-scroll列表循环滚动插件

安装

npm install vue-seamless-scroll --save

引入

import vueSeamlessScroll from "vue-seamless-scroll";

export default {
	components: { 
		// circleBg,
		vueSeamlessScroll
	 }
}

使用

<vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption">
  	<div class="flex table-lie" v-for="(item,index) in listData" :key="index+item">
  		<div class="flex-1 mt-1-5">{
   
   {item}}</div>                    
	</div>
 </vue-seamless-scroll>

js中配置

	data(){
		return:{
			listData:[]
		}
	},
	computed: {
            classOption() {
            return {
                step: 0.6, // 数值越大速度滚动越快
                limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
            },
        },