VUE数字翻滚效果组件

VUE数字翻滚效果组件

数字自下向上滚动 支持动态修改

template

<div class="numberScroll">
  <div class="screenMini" v-for="(item,index) in numberToArray" :key="index">
    <div :style="reStyle(item)">
      <div v-for="(v,i) in numberBox" :key="i">{{v}}</div>
    </div>
  </div>
</div>

script

export default {
  props: {
    /**
     * 传入值String, Number
     */
    number: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      numberBox: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      numberToArray: []
    }
  },
  methods: {
    reStyle (number) {
      return `transform:translate(0,-${+number * 0.42}rem)`
    }
  },
  watch: {
    number: {
      immediate: true,
      deep: true,
      handler (n) {
        const arr = n.toString().split('')
        this.numberToArray = new Array(arr.length).fill(0)
        setTimeout(() => {
          this.numberToArray = arr
        }, 10)
      }
    }
  }
}

style less

.numberScroll{
    display: flex;
    align-items: center;
    .screenMini{
      height: .42rem;
      width: .26rem;
      overflow: hidden;
      &>div{
        display: flex;
        flex-direction: column;
        transform: translate(0,0);
        transition: all .6s;
        &>div{
          display: flex;
          align-items: flex-end;
          justify-content: center;
          line-height:1;
          overflow: hidden;
          height: .42rem;
        }
      }
    }
  }