如何在HarmonyOS中使用Text组件显示倒计时？

Question

在鸿蒙开发过程中，使用Text组件时，怎么显示倒计时

Answer 1

Text 组件显示倒计时，这个功能相对来说比较简单。

下面代码示例显示 Text 组件

<template>
  <div>
    <text>{{ countdown }}</text>
  </div>
</template>

然后在 script 中实现倒计时功能：

<script>
export default {
  data() {
    return {
      countdown: 60
    };
  },
  onInit() {
    this.startCountdown();
  },
  methods: {
    startCountdown() {
      const intervalId = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(intervalId);
        }
      }, 1000);
    }
  }
};
</script>

Answer 2

可以使用 TextTimer 组件，TextTimer组件可以通过文本显示计时信息并控制其计时器状态。