vue数字滚动效果组件封装

话不多说，直接上代码

<template>
  <div class="scroll-number-section">
    <div :class="['number-list',`number-length${length}`,{'allZero':allZero}]">
      <div :class="['number-item',`number-item${item}`,{'disabled-num':index<(9-length)}]" v-for="(item,index) in numberStrArr" :key="index">
        <div class="number-group">
          <div class="number-group-item" v-for="item in 12" :key="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScrollNumber",
  props:["number"],
  data(){
    return {
      allZero:false,
      length:0,
      numberStrArr:["0","0","0","0","0","0","0","0","0"]
    }
  },
  watch:{
    number:{
      handler:function(value){
        let result = ["0","0","0","0","0","0","0","0","0"]
        const valueArr = value.split("")
        const valueArrReverse = valueArr.reverse()
        valueArrReverse.forEach((item,index)=>{
          const itemPosition = result.length-1-index
          result[itemPosition] = item
        })
        this.length = valueArr.length
        this.allZero = result.every(item=>item==="0")
        this.numberStrArr = result
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
$opacity:0.5;
.scroll-number-section{
  width: 100%;
  height: 100%;
  background: url(../../assets/img/prediction/rank-number-setction-bg@2x.webp) no-repeat center center / contain;
  box-sizing: border-box;
  padding: 10px 0;
  .number-list{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    &::before,
    &::after{
      content:"";
      width: 5px;
      height: 6px;
      position: absolute;
      left: 72px;
      bottom: 3px;
      background: url(../../assets/img/prediction/rank-split.webp) no-repeat center bottom / contain;
    }
    &::after{
      left: 124px;
    }
    &.allZero{
      .number-item{
        opacity: $opacity;
      }
    }
    &.number-length1,
    &.number-length2,
    &.number-length3{
      &::after{
        opacity: $opacity;
      }
    }
    &.number-length1,
    &.number-length2,
    &.number-length3,
    &.number-length4,
    &.number-length5,
    &.number-length6{
      &::before{
        opacity: $opacity;
      }
    }
    .number-item{
      position: relative;
      height: 100%;
      width: 14px;
      top: 0;
      margin: 0 1px;
      overflow: hidden;
      &:nth-child(3),
      &:nth-child(6){
        margin-right: 5px;
      }
      background: url(../../assets/img/prediction/rank-number-bg@2x.webp) no-repeat center center / contain;
      .number-group{
        width: 80%;
        height: 860%;
        position: absolute;
        left: 10%;
        transition: all ease 1s;
        .number-group-item{
          overflow: hidden;
          height: 8.33333333%;
          width: 100%;
          background-image: url(../../assets/img/prediction/rank0@2x.webp);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% auto;
          &:nth-child(1){
            background-image: url(../../assets/img/prediction/rank9@2x.webp);
          }
          &:nth-child(2){
            background-image: url(../../assets/img/prediction/rank0@2x.webp);
          }
          &:nth-child(3){
            background-image: url(../../assets/img/prediction/rank1@2x.webp);
          }
          &:nth-child(4){
            background-image: url(../../assets/img/prediction/rank2@2x.webp);
          }
          &:nth-child(5){
            background-image: url(../../assets/img/prediction/rank3@2x.webp);
          }
          &:nth-child(6){
            background-image: url(../../assets/img/prediction/rank4@2x.webp);
          }
          &:nth-child(7){
            background-image: url(../../assets/img/prediction/rank5@2x.webp);
          }
          &:nth-child(8){
            background-image: url(../../assets/img/prediction/rank6@2x.webp);
          }
          &:nth-child(9){
            background-image: url(../../assets/img/prediction/rank7@2x.webp);
          }
          &:nth-child(10){
            background-image: url(../../assets/img/prediction/rank8@2x.webp);
          }
          &:nth-child(11){
            background-image: url(../../assets/img/prediction/rank9@2x.webp);
          }
          &:nth-child(12){
            background-image: url(../../assets/img/prediction/rank0@2x.webp);
          }
        }
      }
      &.disabled-num{
        opacity: $opacity;
      }
      &.number-item0{
        .number-group{
          top: -14px;
          .number-group-item{
            &:nth-child(1),
            &:nth-child(3){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item1{
        .number-group{
          top: -33px;
          .number-group-item{
            &:nth-child(2),
            &:nth-child(4){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item2{
        .number-group{
          top: -52px;
          .number-group-item{
            &:nth-child(3),
            &:nth-child(5){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item3{
        .number-group{
          top: -70px;
          .number-group-item{
            &:nth-child(4),
            &:nth-child(6){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item4{
        .number-group{
          top: -89px;
          .number-group-item{
            &:nth-child(5),
            &:nth-child(7){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item5{
        .number-group{
          top: -107px;
          .number-group-item{
            background-size: 99% auto;
            &:nth-child(6),
            &:nth-child(8){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item6{
        .number-group{
          top: -126px;
          .number-group-item{
            &:nth-child(7),
            &:nth-child(9){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item7{
        .number-group{
          top: -145px;
          .number-group-item{
            &:nth-child(8),
            &:nth-child(10){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item8{
        .number-group{
          top: -163px;
          .number-group-item{
            &:nth-child(9),
            &:nth-child(11){
              opacity:$opacity
            }
          }
        }
      }
      &.number-item9{
        .number-group{
          top: -182px;
          .number-group-item{
            &:nth-child(10),
            &:nth-child(12){
              opacity:$opacity
            }
          }
        }
      }
    }
  }
}
</style>

把图片换成自己的图片就可以了，组件就一个参数number