vue 数据可视化大屏 项目中要求列表可以自动滚动，之前使用的Vue2已经实现过了，vue 结合vue-seamless-scroll实现列表滚动，不过这个项目使用的是vue3+vite之前的组件可能无法使用，所以专门找了一个vue3的无缝滚动组件。

演示demo:vue3数据可视化大屏-科技管理大屏案例演示

首先安装依赖

yarn add vue3-seamless-scroll
或
npm install vue3-seamless-scroll --save
或
pnpm install vue3-seamless-scroll

组件配置

datas

无缝滚动列表数据，组件内部使用列表长度。

  type: Array
  required: true

v-model

通过v-model控制动画滚动与停止，默认开始滚动

  type: Boolean,
  default: true,
  required: false

direction

控制滚动方向，可选值up，down，left，right

  type: String,
  default: "up",
  required: false

isWatch

开启数据更新监听

  type: Boolean,
  default: true,
  required: false

hover

是否开启鼠标悬停

  type: Boolean,
  default: false,
  required: false

limitScrollNum

开启滚动的数据量，只有列表长度大于等于该值才会滚动

  type: [Number, String],
  default: 5,
  required: false

step

步进速度

  type: [Number, String],
  required: false

使用实例

<template>
  <div class="serve">
    <itemTitle title="服务内容统计"></itemTitle>
    <div class="serveList">
      <Vue3SeamlessScroll :wheel="true" :hover="true" :list="list" class="scroll">
        <div class="serveListItem" v-for="(item,index) in list" :key="index">
          <p>服务内容1</p>
          <span>200</span>
        </div>
      </Vue3SeamlessScroll>
    </div>
  </div>
</template>
<script>
import WOW from "wow.js";
import itemTitle from "@/components/itemTitle/index.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

export default {
  name: "cardList",
  components: { itemTitle, Vue3SeamlessScroll},
  data() {
    return {
      list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},],
    }
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },
  watch: {},
  methods: {
    getForget() {
      this.$refs.securityQuestion.getShow()
    },
    getHide() {
      this.show = false
    }
  },
}
</script>
<style lang="scss" scoped>
.serve {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  width: 270px;
  position: relative;
  height: 100%;
  margin-right: 26px;
}

.serveList {
  width: 100%;
  position: relative;
  height: calc(100% - 70px);
  overflow: hidden;
  margin-top: 10px;

  .serveListItem {
    width: calc(100% - 2px);
    margin-right: 2px;
    height: 58px;
    background: url("../../../assets/listItembg.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    p {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #FFFFFF;
      margin-left: 12px;
    }

    span {
      font-size: 20px;
      font-family: DIN;
      font-weight: normal;
      margin-right: 17px;
      color: #FFFFFF;
      text-shadow: 0 0 0.09375rem #0297fa;
    }
  }
}
</style>