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

官网代码示例：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

参考：https://blog.csdn.net/crazycat2046/article/details/126351165

参考：
https://blog.csdn.net/weixin_42215897/article/details/110194641?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167782442816782427455876%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=167782442816782427455876&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-110194641-null-null.142^v73insert_down2,201^v4add_ask,239^v2insert_chatgpt&utm_term=vue-seamless-scroll&spm=1018.2226.3001.4187

npm install vue-seamless-scroll --save

import vueSeamlessScroll from "vue-seamless-scroll";

export default {
    
    
	components: {
    
     
		vueSeamlessScroll
	 }
}

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)
    };
    },
 },

<vue-seamless-scroll :data="listData4" class="seamless-warp2" :class-option="classOption">
  <div class="main_box" >
    <div class="img_box" v-for="(item,index) in listData" :key="index">
      <img :src="item.avatar"/>                
    </div>
  </div>
</vue-seamless-scroll>

.seamless-warp2 {
    
    
    overflow: hidden;
    // height: 80px;
    width: 100%;
    .main_box {
    
    
      display: flex;
      .img_box {
    
    
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin: 8px 10px;
        img {
    
    
          width: 100%;
          height: 100%;
        }
      }
    }
  }