vue3-scroll-seamless 大屏无缝滚动

npm install vue3-scroll-seamless --save
//或者
yarn add vue3-scroll-seamless

页面中引入

<template>
  <div class="safety_item">
    <SoftwareHead title="高危及以上组件漏洞TOP10"></SoftwareHead>
    <div class="table" v-if="data.length">
      <a-row class="table-header">
        <a-col :span="4" class="pl-10">序号</a-col>
        <a-col :span="10">组件名称</a-col>
        <a-col :span="4">漏洞数</a-col>
        <a-col :span="6">漏洞等级</a-col>
      </a-row>
      <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="data">
        <a-row v-for="(item, index) in data" :key="index">
          <a-col :span="4">
            {{ index + 1 }}
          </a-col>
          <a-col :span="10" class="pr-10">
            {{ item.vulName }}
          </a-col>
          <a-col :span="4"> {{ item.vulNum }}</a-col>
          <a-col :span="6">
            <div class="flex">
              <div class="td-dot" :style="{ backgroundColor: item.servity === 4 ? '#990000' : '#FF5500' }"></div>
              <span>{{ getServityName(item.servity) }}</span>
            </div>
          </a-col>
        </a-row>
      </vue3ScrollSeamless>
    </div>
    <Empty v-else />
  </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
import SoftwareHead from '@/components/SoftwareHead/index.vue'
import Empty from '@/views/safety/children/Empty/index.vue'
import { loopholeType } from '@/emun/common.js'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const data = ref([])
const classOptions = reactive({
  step: 0.3, //滚动速度值越大越快，但是值太小会卡顿
  limitMoveNum: data.value.length, //无缝滚动列表元素的长度，一般设置为列表的长度
  direction: 1, //方向: 0 往下 1 往上 2 向左 3 向右。
  limitMoveNum: 6 // 开启无缝滚动的数据量
})
watch(
  () => props.data,
  newVal => {
    setTimeout(() => {
      data.value = newVal || []
    }, 1000)
  },
  {
    deep: true
  }
)
</script>
<style scoped lang="less">
.safety_item {
  .table {
    .table-header {
      height: 44px;
      margin-top: 15px;
      .ant-col {
        color: #d8f3fd;
        line-height: 44px;
      }
    }
    .scroll-wrap {
      width: 100%;
      height: 240px;
      overflow: hidden;
      .ant-col {
        color: #d8f3fd;
        height: 44px;
        line-height: 44px;
        background: rgba(19, 143, 252, 0.1);
        margin-bottom: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:first-child {
          padding-left: 10px;
        }
        .td-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>

效果图

配置项

	描述	默认值default	类型 type
step	数值越大速度滚动越快（step 值不建议太小,不然会有卡顿效果。如果设置了单步滚动,step 需是单步大小的约数）	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction 为 0|1 时生效。	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction 为 2|3 时生效。	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	需要实现手动切换左右滚动的时候,必须设置autoPlay:false（1.1.17 版本开始，只需要设置navigation:false）,目前不支持环路	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

回调事件

 ScrollEnd: function(){
   console.log("ScrollEnd")
 }

参考地址