uni-app 数字增加时变化的位数向上滚动

在 uni-app 中实现数字增加时位数向上滚动的效果，可以通过结合 CSS 动画和 JavaScript 的定时器来实现。以下是一个简单的代码示例，展示如何在数字增加时实现位数向上滚动的效果。

1. 创建页面结构

首先，在你的 uni-app 项目中创建一个页面，例如 pages/index/index.vue，并设置基本的页面结构：

<template>
  <view class="container">
    <view class="number-box" :style="{ animationDuration: animationDuration + 's' }">
      <text class="number">{{ currentNumber }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 1234567, // 目标数字
      incrementInterval: null,
      animationDuration: 1 // 动画持续时间，可根据需要调整
    };
  },
  mounted() {
    this.startIncrement();
  },
  methods: {
    startIncrement() {
      this.incrementInterval = setInterval(() => {
        if (this.currentNumber < this.targetNumber) {
          this.currentNumber++;
          // 根据数字位数动态计算动画持续时间
          this.animationDuration = (this.currentNumber.toString().length + 1) * 0.1;
        } else {
          clearInterval(this.incrementInterval);
        }
      }, 50); // 每50毫秒增加一次
    }
  },
  beforeDestroy() {
    clearInterval(this.incrementInterval);
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.number-box {
  font-size: 48px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
}

.number {
  display: inline-block;
  transition: transform 0.1s linear;
}

/* 关键帧动画，实现数字向上滚动 */
@keyframes scrollUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

.number-box .number {
  animation: scrollUp steps(1, end) var(--animation-duration, 1s) infinite;
}
</style>

注意事项

1. 动画持续时间：animationDuration 是根据当前数字的位数动态计算的，确保动画效果与数字位数匹配。
2. CSS 动画：使用 @keyframes 定义了一个 scrollUp 动画，通过 steps 函数实现逐位滚动效果。
3. 性能考虑：定时器间隔（这里是 50 毫秒）和动画持续时间可以根据实际需求调整，以达到最佳视觉效果和性能。

这个示例提供了一个基础框架，你可以根据实际需求进一步优化和扩展，例如添加更多的样式、处理不同的数字格式等。