实现数字滚动

<template>
  <view class="numberRoll">
    <!-- 数字 -->
    <view v-for="(item, index) in numberList" :key="index">
      <view v-if="showNum(item)" class="numberRoll_wrap">
        <view
          :style="{ transform: `translate(-${50}%, -${item * 10}%)` }"
          class="numberRoll_wrap-number"
        >
          <view v-for="(num, numIndex) in baseNum" :key="numIndex">
            {{ num }}
          </view>
        </view>
      </view>
      <view v-else class="numberRoll_symbol">{{ item }}</view>
    </view>
  </view>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component
export default class NumberRoll extends Vue {
  @Prop({
    type: Array,
    default: [],
  })
  private numberList;
  private baseNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  private showNum(item) {
    return !isNaN(item);
  }
}
</script>
<style lang="less">
.numberRoll {
  display: flex;
  &_wrap {
    display: inline-block;
    width: 21rpx;
    height: 30rpx;
    font-size: 30rpx;
    color: #fff;
    line-height: 30rpx;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-weight: 600;
    &-number {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transition: transform 0.5s ease-in-out;
    }
  }
  &_symbol {
    font-family: 'AlibabaSans';
    font-size: 30rpx;
    color: #fff;
    line-height: 30rpx;
  }
}
</style>