vue2大屏数字滚动效果

代码

<template>
  <div class="centerContent">
    <div class="gmv-title">电商平台总GMV</div>
    <!-- 数字滚动 -->
    <div class="chartNum">
      <span class="centerLeftMoney">￥</span>
      <div class="box-item">
        <li
          :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
          v-for="(item, index) in orderNum"
          :key="index"
        >
          <span v-if="formatNumber(item)">
            <i ref="numberItem">0123456789</i>
          </span>
          <span class="comma" v-else>{{ item }}</span>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    countEnterNum: {
      type: String,
      default: '888',
    },
  },
  data() {
    return {
      orderNum: [], // 默认
    };
  },
  components: {},
  created() {},
  mounted() {
    // this.getCountEnterNum();
  },
  watch: {
    /* eslint-disable */
    countEnterNum: {
      deep: true,
      handler: function (newV, oldV) {
        let list = [];
        const NumberList = this.formatMoney(newV).split('');
        for (let i = 0; i < NumberList.length; i++) {
          if (NumberList[i] == ',') {
            list.push(NumberList[i]);
          } else {
            list.push('0');
          }
        }
        this.orderNum = list;

        this.getCountEnterNum();
      },
    },
    /* eslint-enable */
  },
  methods: {
    formatMoney(num) {
      /* eslint-disable */
      var res = num.toString().replace(/\d+/, function (n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
          return $1 + ',';
        });
      });
      return res;
      /* eslint-enable */
    },
    // 判断是否是数值
    formatNumber(val) {
      /* eslint-disable */
      var numReg = /^[0-9]*$/;
      var numRe = new RegExp(numReg);
      if (!numRe.test(val)) {
        return false;
      } else {
        return true;
      }
      /* eslint-enable */
    },
    getCountEnterNum() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
          this.setNumberTransform();
        });
      }, 1000);
    },
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter((item) => {
        console.log(this.formatNumber(item));
        return this.formatNumber(item);
      });
      // 结合CSS 对数字字符进行滚动,显示订单数量
      /* eslint-disable */
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
      /* eslint-enable */
    },
    // 处理总数字
    toOrderNum(num) {
      num = num.toString();
      // 订单数中加入逗号
      /* eslint-disable */
      // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8);
      num = this.formatMoney(num);
      /* eslint-enable */
      this.orderNum = num.split(''); // 将其便变成数据，渲染至滚动数组
      //   }
    },
  },
};
</script>

<style lang="scss" scoped>
.centerContent {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .gmv-title {
    width: 100%;
    text-align: center;
    margin-top: 5vh;
    font-weight: bolder;
    font-size: 32px;
    margin-bottom: 1.8vh;
  }
  .chartNum {
    display: flex;
    justify-content: center;
  }
  .centerLeftMoney {
    font-size: 50px;
    font-weight: 600;
    margin-right: 5px;
    display: flex;
    align-items: flex-end;
  }
  .cont {
    margin: 0 0;
  }
}

.box-item {
  position: relative;
  height: 70px;
  font-size: 54px;
  line-height: 41px;
  text-align: center;
  list-style: none;
  color: #2d7cff;
  writing-mode: vertical-lr;
  text-orientation: upright;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  margin: 0 auto;
  /* overflow: hidden; */
}

.mark-item {
  width: 10px;
  height: 100px;
  margin-right: 8px;
  line-height: 10px;
  font-size: 48px;
  position: relative;

  & > span {
    position: absolute;
    width: 100%;
    bottom: 10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

.number-item {
  width: 54px;
  height: 81px;
  font-size: 50px;
  list-style: none;
  margin-right: 9px;
  border-radius: 4px;
  color: #e1fffe;
  font-size: 72px;
  background: #ff2577;
  font-weight: 600;
  & > span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;

    & > i {
      font-style: normal;
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
    }
  }
}

.number-item:last-child {
  margin-right: 0;
}

.comma {
  color: #ffffff;
  font-size: 50px;
  font-weight: 600;
}
</style>