vue实现无缝滚动组件，排名，统计等轮播

用vue实现排名统计向上滚动效果，并且像轮播一样无缝衔接，直接上效果图。

        

已经封装为一个组件，需要的可以按照自己的要求修改，话不多说，先上组件代码！

<template>
  <div>
    <div class="rankingTable">
      <div class="title">
        <span class="text">报警数排名</span>
      </div>
      <div class="rankingTableList" ref="tableBox" :style="{ width, height: itemHeight * numPage +'px' }">
        <div class="rankingTableListBox" :style="{ height: itemHeight + 'px' }" v-for="(item, index) in tableList"
          :key="index">
          <div class="boxName">{{ item.name }}</div>
          <div class="rectangularStrip">
            <div class="rectangle1" :style="{ width: item.percentage }"></div>
            <div class="rectangle2"></div>
          </div>
          <div class="boxNumber">{{ item.num }}（次）</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let timer = null
export default {
  props: { tableList: Array, speed: Number, width: String, height: String, numPage: Number, itemHeight: Number },
  destroyed () {
    clearInterval(timer)
  },
  created () {
    // 此处为了实现无缝滚动需要复制第一页的数据
    if (this.tableList.length > this.numPage) {
      const tableList = this.tableList.slice(0, this.numPage, 1)
      // eslint-disable-next-line vue/no-mutating-props
      this.tableList = this.tableList.concat(tableList)
    }
  },
  mounted () {
    if (this.tableList.length > this.numPage) {
      let i = 0
      timer = setInterval(() => {
        this.$refs.tableBox.scrollTo({
          top: i * this.itemHeight,
          behavior: 'smooth' // 添加这个参数可以实现平滑滚动
        })
        i++
        if (i > this.tableList.length - (this.numPage - 1)) {
          i = 2
          this.$refs.tableBox.scrollTo({
            top: 0 * this.itemHeight
          })
          this.$refs.tableBox.scrollTo({
            top: 1 * this.itemHeight,
            behavior: 'smooth' // 添加这个参数可以实现平滑滚动
          })
        }
      }, this.speed)
    }
  }
}
</script>
<style scoped lang="less">
.rankingTable {
  margin-top: 16px;
}

.rankingTableList {
  margin-top: 2px;
  background: rgba(139, 175, 175, 0.1);
  overflow: hidden;

}

.rankingTableListBox {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

}

.boxName {
  width: 80px;
  margin-left: 16px;
  color: white;
  font-weight: 800;
  font-size: 14px;
}

.rectangularStrip {
  margin-left: 12px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;

}

.rectangle1 {
  height: 4px;
  background: linear-gradient(270deg, #EE7827 0%, rgba(238, 120, 39, 0) 100%);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
}

.rectangle2 {
  width: 5px;
  height: 15px;
  background-color: #EE7827;
  transform: skew(-211deg);
  border-radius: 1px 1px 1px 1px;
  opacity: 1;
}

.boxNumber {
  width: 80px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: white;
}
</style>

然后是组件示例引用，tableList是数据。speed是切换速度，单位毫秒。width为容器的宽。numPage为一页展示多少数据，itemHeight为每条数据占据的高度，

<template>
    <div>
       <ScrollData :tableList="tableList" :speed=1000 width="480px" :numPage=6 :itemHeight=40></ScrollData>
    </div>
  </template>
<script>
import ScrollData from '@/components/scrollData.vue'
export default {
  components: { ScrollData },
  data () {
    return {
      tableList: [
        {
          name: '广安作业区1',
          num: 510,
          percentage: '100%'
        },
        {
          name: '广安作业区2',
          num: 120,
          percentage: '30%'
        },
        {
          name: '广安作业区3',
          num: 230,
          percentage: '40%'
        },
        {
          name: '广安作业区4',
          num: 3460,
          percentage: '50%'
        },
        {
          name: '广安作业区5',
          num: 450,
          percentage: '60%'
        },
        {
          name: '广安作业区6',
          num: 650,
          percentage: '70%'
        },
        {
          name: '广安作业区7',
          num: 670,
          percentage: '80%'
        },
        {
          name: '广安作业区8',
          num: 780,
          percentage: '90%'
        }
      ]
    }
  }
}
</script>
<style scoped>

</style>

样式请自行修改，组件传输的几个参数请按照规定类型传入，避免出错，数据条数请大于页面一页展示数量，不然没有滚动！