vuejs实现数字滚动效果

页面中

<template>
<countRoll :number="40" 
            color="rgb(96, 123, 190)"
            font="12px"
            width="9px"
            height="19px"></countRoll>
</template>
<script>
import countRoll from '@/components/countRoll/countRoll'
  components: {
    countRoll
  },
</script>

组件中

<template>
  <div>
    <div class="record">
      <div v-for="(item, index) in list" :key="index"
           :style="fontStyle"
           class="item border">
        <div
          v-for="(v, indexs) in 10"
          :key="indexs"
          :style="{ ...style(item) }"
          class="item"
        >
          {{ indexs }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    number: Number,
    color: {
      type: String,
      default: () => {
        return '#01d8ec';
      },
    },
    font: {
      type: String,
      default: () => {
        return '35px';
      },
    },
    width: {
      type: String,
      default: () => {
        return '23px';
      },
    },
    height: {
      type: String,
      default: () => {
        return '46px';
      },
    },
    lineHeight: {
      type: Number,
      default: () => {
        return 1.2;
      },
    }
  },

  data() {
    return {
      // 父级传入
      quantity: 9, //默认9个
      delayed: false, //从零变化
      // number: '12', //数字
      time: 1000, //过度时间
      timing: 'ease', //过度动画速度
      centertable: [],
      num: 0,
    }
  },
  mounted() {

  },
  computed: {
    numArr() {
      if (this.num) {
        return (this.num + '').split('')
      } else {
        return new Array(this.number.length).fill(0)
      }
    },
    list() {
      let arr = []
      let len = this.numArr.length
      if (this.number >= 0 && this.number < 10) {
        this.quantity = 1
      } else if (this.number >= 10 && this.number < 100) {
        this.quantity = 2
      } else if (this.number >= 100 && this.number < 1000) {
        this.quantity = 3
      } else if (this.number >= 1000 && this.number < 10000) {
        this.quantity = 4
      } else if (this.number >= 10000 && this.number < 100000) {
        this.quantity = 5
      }
      if (this.quantity && this.quantity > len) {
        arr = [
          ...new Array(this.quantity - len).fill(0),
          ...this.numArr,
        ]
      } else {
        arr = this.numArr
      }
      return arr
    },
    fontStyle() {
      return {
        'color': this.color,
        'font-size': this.font,
        'width': this.width,
        'height': this.height,
        'line-height': this.lineHeight
      }
    }
  },
  methods: {

    randomNumber() {
      this.number = Math.floor(Math.random() * (999999999 - 1 + 1)) + 1
    },
    style(e) {
      return {
        transform: `translateY(-${e * 100}%)`,
        transition: this.time + 'ms',
        transitionTimingFunction: this.timing,
      }
    },
  },
  created() {
     if (this.delayed) {
      //页面进入 数字从0开始滚动
      setTimeout(() => {
        this.num = this.number
      }, 1000)
    } else {
    this.num = this.number
    }
  },
  watch: {
    number: {
      handler(newValue, oldValue) {
        //newValue 新的值，oldValue变化前的值
        console.log(newValue, oldValue)
        this.num = newValue
      },
    },
  },
}
</script>
<style lang="scss" scoped>
* {
  touch-action: pan-y;
}

.record {
  display: flex;
  //padding-top: 100px;
  //width: 100%;
  //align-items: center;
  //justify-content: center;
}

.item {
  //width: 60px;
  //height: 80px;
  //font-size: 50px;
  //color: #01d8ec;
  //width: 23px;
  //height: 46px;
  //font-size: 35px;
  font-weight: 600;
  //margin-right: 20px;
  text-align: center;
  //line-height: 1.2;
  overflow: hidden;
}

//.border {
//  border: 1px solid #ccc;
//}
</style>