vue 数据可视化大屏 项目中要求列表可以自动滚动，当前使用的是vue2实现的效果，如果要使用vue3的话，可以通过vue3 使用vue3-seamless-scroll实现列表无缝滚动插件实现.

安装依赖

npm i vueSeamlessScroll --save

实现代码

<template>
  <div class="jiudianlist">
    <div class="jiudianlisthead">
      <div class="item">游客消费排名</div>
      <div class="item">省份名称</div>
      <div class="item">游客消费结构占比</div>
      <div class="item">同比增速排名</div>
    </div>
    <div class="jiudianlistbody">
      <vue-seamless-scroll
        :data="list"
        :class-option="defaultOption"
        class="paiming"
      >
        <div class="jiudianlistbodys" v-for="(item,index) in list" :key="index">
          <div class="item1">{{ item.index }}</div>
          <div class="item1">{{ item.address }}</div>
          <div class="item1">{{ item.percent }}</div>
          <div class="item1">{{ item.rank }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { interface_news } from '../../api/api/zixun'

export default {
  name: 'jiudianlist',
  components: { vueSeamlessScroll },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 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)
      }
    }
  },
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      list: [{
        index: '01',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '02',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '03',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '04',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '05',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '06',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '07',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '08',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '09',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }, {
        index: '10',
        address: '上海市',
        percent: '23.19%',
        rank: '2'
      }]
    }
  },
  watch: {},
  mounted () {
    // this.getInfo()
  },
  methods: {
    getInfo () {
      interface_news({
        key: '4cddbf1a',
        action: 'get_news'
      }).then((res) => {
        this.list = res.data.map((item) => {
          let robj = {}
          robj['news_title'] = item.news_title
          robj['auth_principal_name'] = item.auth_principal_name
          robj['material_update_time'] = item.material_update_time.slice(0, 10)
          return robj
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.jiudianlist {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  height: calc(100% - 20px);
}

.jiudianlisthead {
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  background: rgba(14, 25, 121, 0);

  .item {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    text-indent: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    flex: 1;
  }

  .item:nth-child(3) {
    flex: 2;
  }
}

.jiudianlistbody {
  position: relative;
  width: 100%;
  height: calc(100% - 50px);
}

.jiudianlistbodys {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 42px;
  background: rgba(14, 25, 121, 0);

  .item1 {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    text-indent: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    flex: 1;

    span {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      color: #FFD83C;
    }
  }

  .item1:nth-child(3) {
    flex: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .item1:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.jiudianlistbodys:nth-child(2n+1) {
  background: rgba(0, 132, 255, 0.3);
}

.paiming {
  width: 100%;
  position: relative;
  height: 100%;
  overflow: hidden;
}
</style>