vue2 使用 vue-seamless-scroll 插件实现列表无缝滚动

 1、安装，并在main.js全局引入插件 

//安装命令
npm install vue-seamless-scroll --save

//引入列表滚动插件
import vueSeamlessScroll from 'vue-seamless-scroll' // 循环滚动
Vue.use(vueSeamlessScroll)

2、 在页面中使用

//dom
<template>
  <div>
  <div class="tableItem">
      <table class="table">
          <thead>
            <tr style=" background: rgb(18,34,59);">
              <th style="width:10%;">序号</th>
              <th style="width:15%;">病案号</th>
              <th style="width:10%;">姓名</th>
              <th style="width:20%;">出院科室</th>
              <th style="width:20%;">出院时间</th>
              <th style="width:15%;">住院医师</th>
              <th style="width:10%;">天数</th>
            </tr>
          </thead>
      </table>
    <vue-seamless-scroll
        :data="caseTableData"
        class="seamless-warp"
        style="width: 100%"
        :class-option="classOption"
      >
      <table class="table">
          <thead>
            <tr style=" background: rgb(18,34,59) !important;display:none;">
              <th style="width:10%;">序号</th>
              <th style="width:15%;">病案号</th>
              <th style="width:10%;">姓名</th>
              <th style="width:20%;">出院科室</th>
              <th style="width:20%;">出院时间</th>
              <th style="width:15%;">住院医师</th>
              <th style="width:10%;">天数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in caseTableData" :key="item.id">
              <td style="width:10%;color:rgb(251,207,22);">{{index + 1}}</td>
              <td style="width:15%;">{{item.medicalCaseNum ? item.medicalCaseNum :'-'}}</td>
              <td style="width:10%;">{{item.name}}</td>
              <td style="width:20%;">{{item.dischargeDepartment}}</td>
              <td style="width:20%;">{{item.dischargeDate}}</td>
              <td style="width:15%;">{{item.residentPhysician}}</td>
              <td style="width:10%;">{{item.hospitalStayDaysActual ? item.hospitalStayDaysActual :'-'}}</td>
            </tr>
          </tbody>
      </table>
    </vue-seamless-scroll>
  </div>
  </div>
</template>


<script>
export default {
    data(){
        return {
          caseTableData:[
            {
              medicalCaseNum:2024090301,
              name:'张三',
              dischargeDepartment:'内分泌科', 
              dischargeDate:'2023-09-03', 
              residentPhysician:'李医生', 
              hospitalStayDaysActual:7,
            },
            {
              medicalCaseNum:2024090302,
              name:'张二三',
              dischargeDepartment:'内分泌科1', 
              dischargeDate:'2023-09-02', 
              residentPhysician:'李医生', 
              hospitalStayDaysActual:5,
            },
            {
              medicalCaseNum:2024090303,
              name:'张二三',
              dischargeDepartment:'内分泌科1', 
              dischargeDate:'2023-09-02', 
              residentPhysician:'李医生', 
              hospitalStayDaysActual:5,
            },
            {
              medicalCaseNum:2024090304,
              name:'王五',
              dischargeDepartment:'内分泌科2', 
              dischargeDate:'2023-09-02', 
              residentPhysician:'赵医生', 
              hospitalStayDaysActual:8,
            },
            {
              medicalCaseNum:2024090305,
              name:'王四五',
              dischargeDepartment:'内分泌科2', 
              dischargeDate:'2023-09-02', 
              residentPhysician:'蒙医生', 
              hospitalStayDaysActual:4,
            },
          ],
        }
     },

   computed: {
    classOption () { //配置项
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.caseTableData.length, // 开始无缝滚动的数据量 this.tableList
        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)
      }
    },
   },

}

<style lang="less" scoped>
      .tableItem{
          overflow: hidden;
          .seamless-warp{
            height:  calc(100vw * 140 / 1920);
            overflow: hidden;
          }
          .seamless-borrowwWarp{
             height:  calc(100vw * 100 / 1920);
            overflow: hidden;
          }
        }
         .table{
           margin-top: calc(100vw * 10 / 1920);
          //  color: #fff;
          color: rgb(6,118,231);
           width: 100%;
           tr td {
            font-size: calc(100vw * 12 / 1920);
            text-align: center;
            padding: calc(100vw * 6 / 1920) 0;
           }
           tr th{
            color: rgb(6,225,235);
            font-weight: 500 !important;
            font-size: calc(100vw * 14 / 1920);
            padding: calc(100vw * 6 / 1920) 0;
           }
           thead{
              background: rgb(18,34,59) !important;
           }
         }
</style>

3、效果

vue-seamless-scroll 插件实现列表无缝滚动