第一步：下载安装包

npm install vue-seamless-scroll --save 或yarn add vue-seamless-scroll

第二步：导入并注册

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

第三步：html样式

<div class="tbody">
        <vue-seamless-scroll :class-option="defaultOption" :data="list">
          <div v-for="(item, index) in list" :key="index" class="tr">
            <p class="td">{{ item.name }}</p>
            <p class="td">{{ item.value1 }}</p>
            <p class="td">{{ item.value2 }}</p>
            <p class="td">{{ item.value3 }}</p>
            <p class="td">{{ item.value4 }}</p>
          </div>
        </vue-seamless-scroll>
      </div>

第四步：computed

computed: {
      defaultOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 1, // 开始无缝滚动的数据量
          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: 0, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },

第五步：模拟数据

data() {
      return {
        list: [
          {
            name: '123',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
          {
            name: '456',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
          {
            name: '789',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
          {
            name: '张三',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
          {
            name: '李四',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
          {
            name: '王五',
            value1: '999,999',
            value2: '999,999',
            value3: '999,999',
            value4: '999,999',
          },
        ],
      }
    },

第六步：样式

.tbody {
        width: 100%;
        height: 200px;
        overflow: hidden;
        .tr {
          display: flex;
          align-items: center;
          width: 100%;
          height: 38px;
          &:nth-child(2n) {
            background: rgba(5, 96, 156, 0.15);
          }
          .td {
            font-size: 14px;
            line-height: 38px;
            color: #21e4fe;
            text-align: center;
            width: 20%;
          }
        }
      }