首页uniapp微信小程序圆形进度条

uniapp微信小程序圆形进度条

时间: 2025-01-16 12:07:55 浏览: 143

### 创建圆形进度条组件为了在 UniApp 微信小程序中创建不产生层级问题的圆形进度条组件，可以采用 SVG 或者 CSS 实现而不是 canvas。这样能有效规避 fixed 和 sticky 属性带来的层级冲突。 #### 使用 SVG 构建圆形进度条通过定义一个基于路径 (path) 的圆环来表示进度条，并利用 `stroke-dasharray` 和 `stroke-dashoffset` 来控制显示的比例： ```html <template> <view class="progress-container">  <svg width="80" height="80" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="17.5" fill="none" stroke="#ebebeb" stroke-width="5"/>  <circle :style="{strokeDashoffset: dashOffset}" cx="20" cy="20" r="17.5" fill="none" stroke-linecap="round" stroke="#ff9f1c" stroke-width="5" pathLength="100"/> </svg>  <text>{{ percentage }}%</text> </view> </template> <script> export default { data() { return { percentage: 0, circumference: Math.PI * 35, // 圆周长计算公式 C=πd π≈3.14 d=Diameter(直径)=r*2 }; }, computed: { dashOffset() { const offset = ((100 - this.percentage) / 100) * this.circumference; return `${offset}px`; } }, methods: { updateProgress(value){ this.percentage=value; } } }; </script> <style scoped> .progress-container{ position:relative; } .progress-container svg{ transform:rotate(-90deg); } .progress-container text{ font-size:16px; color:#333; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style> ``` 此方法不仅解决了 canvas 带来的层级问题[^1]，而且提供了更灵活的样式定制选项以及更好的性能表现。

阅读全文