看板无缝滚动

之前用的插件来着，最近公司统一用一个盒子啥的，版本较低，用插件直接不显示，于是自己封装一个组件实现无缝滚动，满足基本需求。

组件如下：

<!--
 * @Author: 方志良 
 * @Date: 2024-08-1 13:05:49
 * @LastEditors: 方志良 
 * @LastEditTime: 2024-08-01 16:10:08
 * @FilePath: \biweiman-screen\src\view\SeamScroll.vue
 * 
-->
<template>
  <div :style="{ transform: `translateY(${scrollPx}px)` }">
    <div style="overflow: hidden;" @mouseover="mouseoverFn" @mouseout="mouseoutFn">
      <slot></slot>
    </div>
    <div style="overflow: hidden;" v-if="listLength * lineHeight > singleHeight" @mouseover="mouseoverFn"
      @mouseout="mouseoutFn">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SeamScroll',
  props: {
    //对应的可视父盒子高度
    singleHeight: {
      type: Number,
      default: 0,
      required: true
    },
    //单行高度,每一项子盒子高度
    lineHeight: {
      type: Number,
      default: 0,
      required: true
    },
    //列表的length
    listLength: {
      type: Number,
      default: 0,
      required: true
    },
    //是否开启自动滚动
    isAutoRoll: {
      type: Boolean,
      default: true,
    },
    // 是否开启鼠标悬停
    hover: {
      type: Boolean,
      default: true,
    },
    // 控制滚动方向,up向上滚动,其他任何字符串向下
    direction: {
      type: String,
      default: "up"
    },
    //滚动1px所需要的毫秒数，越小越快
    singleWaitTime: {
      type: Number,
      default: 100
    },
  },
  data() {
    return {
      scrollPx: 0,//滚动的像素大小
      tableTimer: null
    };
  },
  methods: {
    mouseoverFn() {
      if (!this.hover) return
      clearInterval(this.tableTimer);
    },
    mouseoutFn() {
      clearInterval(this.tableTimer);
      this.tableTimerFun()
    },
    tableTimerFun() {
      //没开启自动滚动或者没有滚动条情况不滚动
      if (!this.isAutoRoll || this.listLength * this.lineHeight < this.singleHeight) return
      let count = 0;
      this.tableTimer = setInterval(() => {
        if (count < this.listLength * this.lineHeight) {
          this.scrollPx = this.direction === 'up' ? this.scrollPx - 1 : this.scrollPx + 1
          count++;
        } else {
          count = 0;
          this.scrollPxFn()
        }
      }, this.singleWaitTime);
    },
    scrollPxFn() {
      this.scrollPx = this.direction === 'up' ? 0 : -(this.listLength * this.lineHeight)
    }
  },

  mounted() {
    this.scrollPxFn()
    this.tableTimerFun()
  },
  beforeDestroy() {
    clearInterval(this.tableTimer);
  }
}
</script>

<style lang="less" scoped></style>

父组件中使用：

<template>
  <div class="middle">
    <table>
      <thead>
        <tr>
          <th>工位名称</th>
          <th>需求数量</th>
          <th>领取数量</th>
          <th>已消耗数量</th>
          <th>剩余数量</th>
        </tr>
      </thead>
      <tbody>
        <SeamScroll :singleHeight="350" :lineHeight="45" :listLength="materialTable.length">
          <tr v-for="(item, index) in materialTable" :key="index">
            <td>{{ item.stationName }}</td>
            <td>{{ item.requireQty }}</td>
            <td>{{ item.receiveQty
            }}</td>
            <td>{{ item.consumeQty
            }}</td>
            <td>{{ item.remainQty }}
            </td>
          </tr>
        </SeamScroll>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'screen',
  components: {
    SeamScroll: () =>
      import("./SeamScroll.vue"),
  },
  data() {
    return {
      materialTable: Array.from({ length: 1 }, (_, index) => ({
        stationName: `${index + 1}号工位`,
        requireQty: 12,
        receiveQty: 10,
        consumeQty: 3,
        remainQty: 7
      })),
    }
  },
}
</script>

<style lang="less" >
table {
  width: 100%;
  border-collapse: collapse;
  height: 400px;
  background-color: #083680;
}

th {
  color: #16c2e3;
  background-color: #032c6d;
}

td {
  color: #ffffff;
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 使用省略号来表示被修剪的文本 */
  white-space: nowrap;
  /* 文本不换行 */
}

th,
tr {
  height: 45px;
  font-size: 25px;
  line-height: 45px;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  /* 偶数行（从1开始计数，所以2, 4, 6...是偶数） */
  background-color: #0641a1;
}

tr:nth-child(odd) {
  /* 奇数行（1, 3, 5...） */
  background-color: #083680;
}

thead tr,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table tbody {
  display: block;
  overflow-y: hidden;
  width: 100%;
  height: 350px;
}
</style>