uni-app 圆环倒计时

在uni-app中实现圆环倒计时效果，可以利用Canvas绘图和JavaScript定时器来实现。以下是一个简单的示例代码，展示了如何实现这一功能。

首先，确保你的uni-app项目中已经配置好Canvas组件。然后在页面的<template>中添加Canvas组件：

<template>
  <view class="container">
    <canvas canvas-id="countdownCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

接下来，在<script>部分编写逻辑代码：

<script>
export default {
  data() {
    return {
      totalTime: 60, // 总倒计时时间（秒）
      remainingTime: 60,
      timer: null,
    };
  },
  onLoad() {
    this.startCountdown();
  },
  methods: {
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime -= 1;
          this.drawCircle(this.remainingTime / this.totalTime * 360);
        } else {
          clearInterval(this.timer);
          this.drawCircle(360); // 可选：倒计时结束时绘制完整圆环
          uni.showToast({ title: '倒计时结束', icon: 'success' });
        }
      }, 1000);
    },
    drawCircle(angle) {
      const ctx = uni.createCanvasContext('countdownCanvas');
      ctx.clearRect(0, 0, 300, 300); // 清空画布
      ctx.beginPath();
      ctx.arc(150, 150, 100, -Math.PI / 2, angle * Math.PI / 180 - Math.PI / 2, false);
      ctx.setStrokeStyle('#3498db');
      ctx.setLineWidth(10);
      ctx.stroke();
      ctx.draw();
    },
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

在<style>部分添加一些简单的样式：

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

这个示例代码创建了一个300x300像素的Canvas，并在其中绘制一个圆环倒计时。startCountdown方法启动一个每秒更新一次的定时器，drawCircle方法根据剩余时间与总时间的比例计算角度并绘制圆环。当倒计时结束时，清除定时器并显示一个提示。

你可以根据需要调整Canvas的大小、圆环的颜色、线条宽度等参数，以适应你的具体需求。