vue利用vue-seamless-scroll实现无缝滚动

1、下载

npm i --s vue-seamless-scroll

1、在全局挂载

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

3、使用

<vue-seamless-scroll class="seamless-warp" :data="companyGovernanceList"  :class-option="classOption">
       <div class="supervise-table flex-row-between" v-for="(item, index) in companyGovernanceList" :key="index" :class="index % 2 == 0 ? '' : 'active' ">
           <div class="width25 over-hidden">{
   
   {item.createTime.substr(0, 10)}}</div> 
           <div class="width50 pl10 over-hidden">{
   
   {item.title}}</div>
           <div class="width25 pl25" :class="item.status == 3 ? 'orange-color' : item.status == 1 ? 'blue-color' : item.status == 2 ? 'green-color' : ''">{
   
   {item.status == 3 ? '待处理' : item.status == 1 ? '处理中' : item.status == 2 ? '已完成' : ''}}</div>
       </div>
</vue-seamless-scroll>

computed: {
    
    
    classOption() {
    
    
      return {
    
    
        step: .5, // 数值越大速度滚动越快
        // 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)
      }
    }
  },

.seamless-warp {
    
    
        width: 100%;
        height: 251px;
        overflow: hidden;
        .supervise-table {
    
    
            padding: 0 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #A3C7D3;
            font-size: 12px;
            width: 100%;
            height: 42px;
            line-height: 42px;
            box-sizing: border-box;
            &.active {
    
    
                background: #13326B
            }
        }
    }
.width25 {
    
    
  width: 25%;
}
.width50 {
    
    
  width: 50%;
}
.over-hidden {
    
    
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flex-row-between {
    
    
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.pl10 {
    
    
  padding-left: 10px;
  box-sizing: border-box;
}
.pl25 {
    
    
  padding-left: 25px;
  box-sizing: border-box;
}