vue实现一个可以自动轮播的排行榜

UI 设计

平滑过渡：使用Vue的transition-group实现流畅的动画效果
样式设计：前三名的徽章样式、进度条的颜色和动态宽度。
响应式：组件能够适应不同屏幕尺寸。

<template>
  <el-card :style="{ 'width':width }">
    <div class="title">
      <span class="text">报警数排名</span>
    </div>
    <div class="ranking-container"
         @mouseenter="pause"
         @mouseleave="resume">
      <transition-group
        name="list"
        tag="div"
        class="ranking-list"
        ref="tableBox"
      >
        <div
          v-for="(item, index) in visibleItems"
          :key="item.id"
          class="ranking-item"
          :class="{'top-three': index < 3}"
          :style="{'height': itemHeight}"
        >
          <!-- 排名标识 -->
          <div class="rank-badge">
            <span v-if="item === tableList[0]">🥇</span>
            <span v-else-if="item === tableList[1]">🥈</span>
            <span v-else-if="item === tableList[2]">🥉</span>
            <span v-else>{{ currentStartIndex + index + 1 }}</span>
            <div class="name">{{ item.name }}</div>
          </div>

          <!-- 内容区域 -->
          <div class="progress-bar">
            <div
              class="progress"
              :style="{ width: item.value /10 + '%' }"
              :class="['color-' + (index % 5)]"
            ></div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </transition-group>
    </div>
  </el-card>
</template>
<style scoped>
.el-card {
  border-color:  rgba(25,25,112,0.4);
  background-color: rgba(	25,25,112,0.2);
  box-shadow: 0 2px 12px 0 rgba(10,32,106,0.4);
  /*padding: 5px;*/
  width: 100%;
  height: 100%;
}
.title .text {
  color: #f0f0f0;
}
.ranking-container {
  margin-top: 5px;
  overflow: hidden;
}
.ranking-list {
  position: relative;
}
.ranking-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 5px;
  transition: all 0.5s ease;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.list-leave-active {
  position: absolute;
  width: 100%;
}
.rank-badge {
  width: 100%;
  height: 23px;
  display: flex;
  margin-right: 15px;
  padding-left: 5px;
}
.rank-badge span {
  color: #f0f0f0;
}
.top-three .rank-badge {
  color: #1f2f3d;
}
.name {
  font-weight: 400;
  /*margin-bottom: 4px;*/
  margin-left: 10px;
  font-size: small;
  color: #f0f0f0;
}
.progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  height: 10px;
  background: #248fd8;
  border-radius: 12px;
  position: relative;
}
.progress {
  height: 100%;
  border-radius: 12px;
  transition: width 0.8s ease;
}
.value {
  position: absolute;
  right: 10px;
  color: #ffffff;
  font-size: 0.9em;
}
.color-0 { background: #7B68EE; }
.color-1 { background: #67c23a; }
.color-2 { background: #e6a23c; }
.color-3 { background: #f56c6c; }
.color-4 { background: #AFEEEE; }
</style>

js实现滚动的控制

1. 获取每次展示的数据列表

currentStartIndex：在总的数据中的开始下标；visibleNum：每次展示的数据条数

computed: {
    visibleItems: function () {
      return [
        ...this.tableList.slice(this.currentStartIndex),
        ...this.tableList.slice(0, this.currentStartIndex)
      ].slice(0, this.visibleNum)
    }
 },

2. 一些控制方法

// 滚动到下一个
next() {
  this.currentStartIndex = (this.currentStartIndex + 1) % this.tableList.length
},
// 启动自动播放
start() {
  if (!this.timer) {
    this.timer = setInterval(this.next, this.interval)
  }
},
//暂停播放
pause() {
  clearInterval(this.timer)
  this.timer = null
},
resume() {
  if (!this.timer) {
    this.start()
  }
}

外部使用组件

参数说明：
tableList: Array, 传入的总的数据列表
interval: Number, 滚动的时间
width: String, 组件的宽度
visibleNum: Number, 每次显示的记录条数
itemHeight: Number，每条记录的高度

<rank-card :table-list="tableList"
                 width="250px"
                 :item-height="40"
                 :interval="1500"
                 :visible-num="5"/>