在这个封装的基础上可以继续把一些数据处理抽离出去放在父组件中去通过传值引入，但是由于项目周期原因没时间处理。大致效果如下：

无缝滚动.gif

源码文档：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

1、npm安装

npm install vue-seamless-scroll --save

2、在二次封装的组件中引入

import vueSeamlessScroll from "vue-seamless-scroll";

3、封装的代码

<template>
  <div>
    <div class="table-demo-wrapper">
      <vueSeamlessScroll
        :data="dzxData"
        class="seamless-warp"
        :class-option="optionSetting"
      >
        <ul
          class="list"
          :style="'height:' + dzxData.length * 38 + 'px;'"
          @mousemove="stopScroll"
          @mouseout="doScroll"
        >
          <li
            :class="{ devicelistitem: true, even: (index + 1) % 2 !== 0 }"
            v-for="(item, index) in dzxData"
            :key="index"
          >
            <span
              :title="item.title"
              @click="gotoPath(item)"
              style="cursor: pointer"
              class="projectClass"
              >{{ item.title }}</span
            >
            <span :class="item.status == '1' ? 'failed' : 'success'">{{
              item.status == "1" ? "未读" : "已读"
            }}</span>
          </li>
        </ul>
      </vueSeamlessScroll>
    </div>
    <!-- 详情弹窗 -->
    <msgDetail ref="msgDialog"></msgDetail>
  </div>
</template>

<script>
import { getMessageReceiveList } from "@/api/home.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import msgDetail from "./msgDetail";
export default {
  name: "noDone",
  components: { vueSeamlessScroll, msgDetail },
  data() {
    return {
      allowScroll: true,
      dzxData: [],
    };
  },
  methods: {
    gotoPath(item) {
      this.$refs.msgDialog.handleOpen(item);
    },
    getData() {
      getMessageReceiveList({
        pn: 1,
        ps: 10,
      }).then((res) => {
        if (res.code == 0) {
          // this.dzxData = res.data.records;
          this.dzxData = [
            {
              id: 1, //用户消息id
              messageId: 2, //消息id
              uid: 3, //用户id
              name: "", //发送者姓名
              status: 2, //状态；1.未读   2.已读
              updateTime: "2021-05-27 14:56:06", //发布时间
              title: "大擦vasvavadsdahhijdbajbjdabdb", //标题
              content: "测试第一条", //内容
            }
          ];
        }
      });
    },
    stopScroll() {
      this.allowScroll = false;
    },
    doScroll() {
      this.allowScroll = true;
    },
  },
  mounted() {
    this.getData();
  },
  computed: {
    optionSetting() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 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)
      };
    },
  },
};
</script>

<style lang="less" scoped>
.table-demo-wrapper {
  margin-top: 10px;
  width: 100%;
  max-height: 240px;
  box-sizing: border-box;
  // padding: 20px 26px 0;
  overflow: hidden;

  .table-header {
    margin: 0px;
    li {
      height: 38px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      span {
        line-height: 40px;
        flex: 2;
        font-size: 14px;
        font-family: FZZhengHeiS-M-GB;
        font-weight: 700;
        color: #909399;
        text-align: left;
        &:nth-child(1) {
          flex: 1;
        }
        &:nth-child(4) {
          flex: 1;
        }
      }
    }
  }
  .failed {
    display: inline-block;
    color: #f99398 !important;
    border: 1px solid #f99398;
    border-radius: 3px;
    background: #fff1f0;
    text-align: center !important;
  }
  .success {
    display: inline-block;
    color: #6dcf96 !important;
    border: 1px solid #6dcf96;
    border-radius: 3px;
    background: #f6ffed;
    text-align: center !important;
  }
  .seamless-warp {
    overflow: hidden;
    .list {
      overflow: hidden;
      .devicelistitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 38px;
        width: 100%;
        margin-left: -40px;
        padding-left: 10px;
        span {
          flex: 2;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #606266;
          text-align: left;
          &:nth-child(1) {
            flex: 17;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 5px;
          }
          &:nth-child(4) {
            flex: 1;
            display: inline-block;
            color: red;
          }
        }
      }
      .even {
        background: #fff;
      }
    }
  }
}
.noDone {
  width: 100%;
  margin-top: -10px;
  margin-bottom: 20px;
  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }
  .first {
    margin-top: 20px;
  }
}
.projectClass:hover {
  color: #00b98d !important;
}
</style>

4、父组件的使用

import ScrollDone from "./components/scrollDone";//引入

 <ScrollDone></ScrollDone>