vue-cli3 实现封装一个滚动公告栏组件（数据大屏可用）

注意

组件名等可自行更改，仅作参考用

预览图

思路

1. 总共10条数据，在界面中显示5条，每3秒滚动一次，每次向下滚动一条
2. 通过两个盒子，外层定高盒子设置溢出部分隐藏
3. 内部定高盒子每次都通过marginTop值得改变去向上滚动
4. 滚动动画通过setInterval实现
5. 渐变色横条也是两条，底层定宽，顶层计算宽度并设置渐变色

代码

<template>
  <div class="interface">
    <div class="interface__content">
      <div v-for="(item, index) in this.interfaceData" :key="index">
        <div class="interface__header">
          <span class="interface__header__title">{{ item.title }}</span>
          <span class="interface__header__number">{{ item.number }}</span>
        </div>
        <div class="interface__bar">
          <div class="interface__bar--bottom"></div>
          <div :class="item.className"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "interface-overview",
  props: ["interfaceData"],
  data(){
    return{
      interval:''
    }
  },
  mounted() {
    var top = 0;
    this.interval = setInterval(() => {
      let box = document.getElementsByClassName("interface__content");
      if (top <= -200) {
        top = 0;
      } else {
        top -= 40;
      }
      box[0].style.marginTop = top + "px";
    }, 2000);
  },
  watch: {
    interfaceData(newVal) {
      this.init();
    },
  },
  methods: {
    init() {
      const classNameList = [
        "bar__one",
        "bar__two",
        "bar__three",
        "bar__four",
        "bar__five",
        "bar__six",
        "bar__seven",
        "bar__eight",
        "bar__nine",
        "bar__ten",
      ];
      if (this.interfaceData.length>0) {
        const sum = this.interfaceData[0].number * 1.2;
        for (let i = 0; i < 10; i++) {
          this.interfaceData[i].className = classNameList[i];
          this.interfaceData[i].percent =
            (this.interfaceData[i].number / sum).toFixed(2) * 100;
          setTimeout(() => {
            let bar = document.getElementsByClassName(classNameList[i]);
            bar[0].style.width = this.interfaceData[i].percent + "%";
          });
          this.interfaceData[i].number = this.interfaceData[
            i
          ].number.toLocaleString("en-US");
        }
      }
    },
  },
  beforeDestroy(){
    clearInterval(this.interval);
  }
};
</script>

<style lang="less">
.barBasicStyle() {
  border-radius: 8.71px;
  height: 4px;
}
.barStyle(@startColor,@endColor) {
  .barBasicStyle();
  position: absolute;
  background-image: linear-gradient(90deg, @startColor 0%, @endColor 100%);
}
.interface {
  opacity: 0.88;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.23px;
  padding: 0 20px;
  overflow: hidden;
  margin-top: 15px;
  height: 190px;
  &__content {
    height: 190px;
  }
  &__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8.5px;
    &__title{
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right:10px;
    }
  }
  &__bar {
    width: 100%;
    margin-bottom: 11.5px;
    position: relative;
    .barBasicStyle();
    &--bottom {
      position: absolute;
      width: 100%;
      opacity: 0.13;
      background: #ffffff;
      .barBasicStyle();
    }
    & .bar {
      &__one {
        .barStyle(#2d5aff,#2d90ff);
      }
      &__two {
        .barStyle(#2dbfff,#2dffcf);
      }
      &__three {
        .barStyle(#00e9b6, #a9e868);
      }
      &__four {
        .barStyle(#a4fb50, #ffde48);
      }
      &__five {
        .barStyle(#fdde48, #ff7d2d);
      }
      &__six {
        .barStyle(#ff7f2e, #c839ba);
      }
      &__seven {
        .barStyle(#c839b9,#6d51ff);
      }
      &__eight {
        .barStyle( #7150fb, #5cc9ff);
      }
      &__nine {
        .barStyle(#5cc5ff, #28fed2);
      }
      &__ten {
        .barStyle( #2acdad, #fff42d);
      }
    }
  }
}
</style>