vue 实现数字滚动 数字 动态滚动

<template>

  <div class="centerContent">

    <!-- 数字滚动 -->

    <div class="chartNum">

      <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="!isNaN(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: ["0", "0", ",", "0", "0", "0", ",", "0", "0", "0"], // 默认

    };

  },

  components: {},

  created() {

  },

  mounted() {

    this.getCountEnterNum();

  },

  watch: {

    countEnterNum() {

      this.getCountEnterNum();

    },

  },

  methods: {

    getCountEnterNum() {

      this.$nextTick(() => {

        this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用

        this.setNumberTransform();

      });

    },

    // 设置文字滚动

    setNumberTransform() {

      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量

      const numberArr = this.orderNum.filter((item) => !isNaN(item));

      // 结合CSS 对数字字符进行滚动,显示订单数量

      for (let index = 0; index < numberItems.length; index++) {

        const elem = numberItems[index];

        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;

      }

    },

    // 处理总数字

    toOrderNum(num) {

      num = num.toString();

      // 把数变成字符串

      if (num.length < 8) {

        num = "0" + num; // 如未满八位数，添加"0"补位

        this.toOrderNum(num); // 递归添加"0"补位

      } else if (num.length === 8) {

        // 订单数中加入逗号

        num = num.slice(0, 2) + "," + num.slice(2, 5) + "," + num.slice(5, 8);

        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组

      }

    },

  },

};

</script>

<style lang="stylus" scoped>

.centerContent {

  width: 100%;

  margin: 0 40px;

  .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: 5px;

  line-height: 10px;

  font-size: 48px;

  position: relative;

  & > span {

    position: absolute;

    width: 100%;

    bottom: 30px;

    writing-mode: vertical-rl;

    text-orientation: upright;

  }

}

.number-item {

  width: 35px;

  height: 46px;

  font-size: 50px;

  list-style: none;

  margin-right: 10px;

  border-radius: 4px;

  border: 1px solid #ddd;

  color: #e1fffe;

  font-size: 35px;

  border: 1px solid #ddd;

  border-image: linear-gradient(#01d8ff, #016c80) 1;

  & > 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: 6px;

      left: 50%;

      transform: translate(-50%, 0);

      transition: transform 1s ease-in-out;

      letter-spacing: 10px;

    }

  }

}

.number-item:last-child {

  margin-right: 0;

}

.comma {

  color: #00ffff;

}

</style>