js自定义数字跳动效果computeNumber

<!--
 * @Author: your name
 * @Date: 2020-03-29 10:37:57
 * @LastEditTime: 2020-03-29 10:42:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lwnhwyfront\src\components\computeNumber.vue
 -->
<template>
  <div id="demo">
    <div class="nwwest-roll" :style="{'height': styleHeight + 'px'}" id="nwwest-roll">
      <ul id="roll-ul" class="roll-ul">
        <li v-for="(item, index) in list" :style="{'height': styleHeight + 'px'}" ref="rollul" class="rollLi" :key="index" :class="{anim:animate==true}">
          <span class="name">{{item}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      number: {
        type: [String, Number],
        default: ''
      },
      styleHeight: {
        type: Number,
        default: 0
      },
      autoplay: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      number (newValue, oldValue) {
        if( newValue !== oldValue ) {
          this.list[1] = newValue
          this.list[0] = oldValue
          this.num = newValue;
          this.scroll(this.number);
        }
      }
    },
    data () {
      return {
        animate: true,
        list: [this.number, this.number],
        num: this.number,
        newNum: this.number,
        timeout: '',
        timeInterval: ''
      }
    },
    mounted () {
      if( this.autoplay ) {
        this.timeInterval = setInterval(() => {
          this.scroll(this.number);
        }, 4000);
      }
    },
    beforeDestroy() {
      clearInterval(this.timeout)
      clearInterval(this.timeInterval)
    },
    methods: {
      scroll(num){
        let con1 = this.$refs.rollul;
        /* styleHeight */
        // let marginTopHeight = (this.styleHeight - 10) + 'px'
        con1[0].style.marginTop = 0;
        this.animate = !this.animate;
        var that = this;
        that.timeout = setTimeout(() =>{
          that.list[1] = num
          con1[0].style.marginTop = -this.styleHeight + 'px';
          that.animate = !that.animate;
          setTimeout(() => {
            that.list[0] = num
          }, 1000);
        }, 80)
      }
    }
  }
</script>
<style lang="" scoped>
  .nwwest-roll {
    overflow: hidden;
  }
  .nwwest-roll .name{
    display: inline-block;
  }

  .roll-ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .anim {
    transition: all 1s;
  }
</style>

页面使用：xxx.vue页面

 

　　　　　　　　JS：import computeNumber from "@/components/computeNumber.vue";

            HTML：<div class="f45">
              <compute-number autoplay :styleHeight="45" :number="huAll"></compute-number>
            </div>