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

注意

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

预览图

vue-cli3 实现封装一个滚动公告栏组件(数据大屏可用)_第1张图片

思路

  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>

你可能感兴趣的:(Vue-cli,vue,js)