uniapp 如何实现环形等级效果

在uniapp中如何实现环形等级效果？我想做一个用户等级展示的UI，类似于圆环进度条，但需要显示具体的等级数字（比如Lv.5）。目前尝试过使用canvas绘制，但遇到动态适配不同屏幕尺寸的问题，有没有更简单的组件或方案？最好能支持渐变颜色和动画效果。

2 回复

使用CSS绘制环形进度条，结合uni-app的canvas或CSS3动画实现。步骤如下：

  1. 使用canvas绘制圆形路径，设置stroke样式；
  2. 计算进度角度，动态绘制弧线；
  3. 添加动画效果，使用requestAnimationFrame或CSS transition；
  4. 中间显示等级文字。

示例代码：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(blue 0%, lightgray 0%);
  transition: background 1s;
}

在 UniApp 中实现环形等级效果，可以通过以下步骤完成，使用 canvas 绘制环形进度条，并结合样式和逻辑控制等级显示。

实现步骤：

  1. 添加 Canvas 画布：在页面中放置一个 canvas 元素，用于绘制环形进度。
  2. 绘制环形进度：使用 Canvas API 绘制背景圆环和进度圆环。
  3. 动态更新进度：通过数据绑定和计算属性，根据等级值动态更新环形进度。
  4. 显示等级文本：在环形中心添加等级数字或文本。

示例代码：

<template>
  <view class="container">
    <canvas canvas-id="levelCanvas" class="canvas"></canvas>
    <view class="level-text">{{ currentLevel }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLevel: 3, // 当前等级，例如3级
      maxLevel: 10,    // 最大等级
      progress: 0.5    // 当前进度（0到1之间，例如0.5表示50%）
    };
  },
  onReady() {
    this.drawLevelRing();
  },
  methods: {
    drawLevelRing() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.canvas').boundingClientRect(data => {
        const ctx = uni.createCanvasContext('levelCanvas', this);
        const width = data.width;
        const height = data.height;
        const centerX = width / 2;
        const centerY = height / 2;
        const radius = Math.min(centerX, centerY) - 5; // 环形半径
        const lineWidth = 8; // 环形宽度

        // 绘制背景圆环
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.setStrokeStyle('#e0e0e0');
        ctx.setLineWidth(lineWidth);
        ctx.stroke();

        // 绘制进度圆环
        const startAngle = -0.5 * Math.PI; // 从顶部开始
        const endAngle = startAngle + 2 * Math.PI * this.progress;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.setStrokeStyle('#007AFF'); // 进度颜色
        ctx.setLineWidth(lineWidth);
        ctx.setLineCap('round');
        ctx.stroke();

        ctx.draw();
      }).exec();
    }
  }
};
</script>

<style>
.container {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
}
.canvas {
  width: 100%;
  height: 100%;
}
.level-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24rpx;
  color: #333;
}
</style>

说明：

  • 动态数据：修改 currentLevel、maxLevel 和 progress 数据可以更新环形进度和等级显示。
  • 样式调整：通过 CSS 调整环形大小、颜色和文本样式。
  • 进度计算：progress 表示当前等级进度（例如 0.5 对应 50%），可根据实际等级逻辑计算。

此方法简单高效，适用于 UniApp 中的等级展示场景。如有更复杂需求（如动画效果），可结合 setInterval 或动画 API 实现平滑过渡。

回到顶部