数字向上滚动组件

效果如图：

vue+css纯手写代码，首先是遍历和处理数据，如果数据给的好不用处理那可以省略处理这步。

0-9数字依次向上滚动两次，最终停留在要求的数字上。整了个信息差。

图上是三组数据，这里代码只放一组作为示例。需要做的准备：0-9和.的编号数字图片11张，再加背景图片一张。

组件代码：

父组件：

<scrollText   :num="QYnum" ></scrollText>

  QYnum : null,

mounted() {

    this.$nextTick(() => {

        this.QYnum = 13234;

    });

}

子组件scrollText.vue

（注意 :key="new Date().getTime()"这句话是为了让每次加载数据都更新组件）

（如果没有数字图片，可以把require('@/assets/img/screen/num-' + val + '.png') +') no-repeat center'那句样式去掉直接{{val}}数字。）

<!--
 * @Description:滚动数字组件
 * @Author: 如意酱
 * @Date: 2022-01-08 13:31:37
 * @LastEditTime: 2023-07-17 14:58:21
-->
<template>
  <div class="scrollText" ref="scrollText" :key="new Date().getTime()">

    <div class="scrollText-main">
      <div class="title">13个景区接待旅游人数<span>(万人次)</span></div>
      <div class="number-wrap">
        <div class="number" v-for="(item, index) in data" :key="index">
          <div
            class="scroll-box"
            :style="{
              animationDelay: 0.2 * index + 's'
            }"
          >
            <span
              v-for="(val, i) in item.dataAll"
              :key="i"
              :style="{
                background:
                  'url(' +
                  require('@/assets/img/screen/num-' + val + '.png') +
                  ') no-repeat center'
              }"
            >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scrollText',
  data() {
    return {
      data: [],
      box: [],
      dataAll: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8]
    };
  },
  props: {
    //数据
    num: {
      type: Number
    }
  },
  watch:{
    num(val){

        this.data1 = [];

      let box = String(this.num / 10000).split('');//此处是基于项目的特殊处理，无此需求可以不除10000
      box.map(val => {
        let obj = {
          num: val,
          dataAll: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, val]
        };
        this.data.push(obj);
      });

    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.scrollText {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  .scrollText-main {
    .title {
      margin: 5px 0 5px 7px;
      padding-right: 15px;
      display: inline-block;
      font-size: 16px;
      color: #b4d1e6;
      span {
        color: #02fffb;
        font-size: 14px;
      }
    }
    .number-wrap {
      display: flex;
      justify-content: flex-start;
      .number {
        background-image: url('~@/assets/img/screen/number-bg.png'); //替换图片
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
        width: 60px;
        height: 70px;
        line-height: 80px;
        text-align: center;
        font-size: 34px;
        color: #fff;
        position: relative;
        overflow: hidden;
        .scroll-box {
          width: 60px;
          height: 1400px;
          position: absolute;
          left: 0;
          animation: change 2s ease-in-out forwards;
          -webkit-animation: change 2s ease-in-out forwards;

          @keyframes change {
            0% {
              top: 0px;
            }
            100% {
              top: -1330px;
            }
          }
          @-webkit-keyframes change {
            0% {
              top: 0px;
            }
            100% {
              top: -1330px;
            }
          }
          span {
            display: block;
            width: 60px;
            height: 70px;
            line-height: 80px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>