How to use timer to achieve page countdown effect in uniapp

Uniapp is a cross-platform development framework that can be used to develop many types of applications, including applets, H5, Android, iOS, etc.

In Uniapp, the page countdown effect can be achieved using a timer. The timer can set a time interval and execute the specified code within each time interval to achieve the page countdown effect.

The following is an example that demonstrates how to use a timer to achieve a page countdown effect.

First, add the following code to the .vue file in the page where the countdown needs to be displayed:

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

<script>
export default {
  data() {
    return {
      countdown: 10, // 初始化倒计时时间
      timer: null // 定义定时器变量
    };
  },
  onShow() {
    this.startCountdown(); // 在页面显示时开始倒计时
  },
  onHide() {
    this.stopCountdown(); // 在页面隐藏时停止倒计时
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          this.stopCountdown(); // 倒计时结束时停止倒计时
        } else {
          this.countdown--; // 每个时间间隔倒计时减1
        }
      }, 1000); // 每隔1秒执行一次
    },
    stopCountdown() {
      clearInterval(this.timer); // 停止定时器
    }
  }
};
</script>

<style>
/* 样式可根据需求自定义 */
text {
  font-size: 30px;
  color: red;
}
</style>

In the above code, we define # through the data function ##countdownVariable, used to store the countdown time. We also define a timer variable to store the timer object.

Call the

startCountdown method in the onShow life cycle function, which will use the setInterval function to create a timer and set it at each time The countdown time is updated within the interval. If the countdown time is less than or equal to 0, stop the timer.

Call the

stopCountdown method in the onHide life cycle function, which will stop the execution of the timer.

Finally, we display the value of the

countdown variable in the template, so that we can see the page countdown effect.

The above is an example of using Uniapp to achieve the page countdown effect. You can modify and extend the code according to your own needs, such as modifying the countdown time, style, etc. Hope it helps you!

The above is the detailed content of How to use timer to achieve page countdown effect in uniapp. For more information, please follow other related articles on the PHP Chinese website!