微信小程序仪表盘进度带刻度组件

最新推荐文章于 2025-05-15 09:47:03 发布

记性差的程序猿

最新推荐文章于 2025-05-15 09:47:03 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/u010855711/article/details/123565511

这篇博客展示了如何在WXML中应用Progress组件来创建一个高度可定制的进度条，包括设置高度、半径、颜色等属性，并通过JS配置文本样式和动画效果。在JSON中引用组件并提供组件源文件下载链接，便于开发者实践和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果：

wxml中应用：

<progress 
      height="750" 
      r="110" 
      bgWidth="13"
      gaugeid="g1"
      animateMsec="700" 
      scaleTextStyle="{
  
  {scaleTextStyle}}" 
      indicatorTextStyle='{
  
  {indicatorTextStyle}}'
      indicatorValueStyle='{
  
  {indicatorValueStyle}}'
      indicatorCircleStyle='{
  
  {indicatorCircleStyle}}'
      indicatorBgColor="#01CDA8"
      min="0"
      max="100"
      value="60"
  />

js中配置

  data: {
   
    scaleTextStyle:{
      show:true,
      size:12,
      color:'#01CDA8'
    },
    indicatorTextStyle:{
      show:true,
      size:16,
      text:'身体质量等级'
    },
    indicatorValueStyle: {
      show: true,
      size: 55,
      color:'#01CDA8'
    },
    indicatorCircleStyle:{
      show:true,
      boderColor:[