[移动开发]原生进度条 微信小程序实现

css样式

/* base-ui/ms-progress-bar/index.wxss */
@other-font: 28rpx;
@ms-primary:#169BD5;
@ms-success:#29AA4F;
.progress-bar-area{
height: 36rpx;
position: relative;
}
.progress-bar{
height: inherit;
transition: width 0.2s linear;
position: absolute;
z-index: 1;
}
.bar-text{
font-size: @other-font;

position: absolute;
left: 50%;
z-index: 2;
}

js样式

// base-ui/ms-progress-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
    //进度条百分比
    percentage:{
      type:Number,
      value:0
    },
    //进度条颜色
    barColor:{
      type:String,
      value:"rgb(0, 204, 0)"
    },
    //进度文字颜色
    textColor:{
      type:String,
      value:"#fff"
    },
    //轨道颜色
    trackColor:{
      type:String,
      value:"#e5e5e5"
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

html样式

<view class="progress-bar-area" style="background-color: {{trackColor}};">
  <view class="progress-bar" style="background-color: {{barColor}};width: {{(percentage>100?100:percentage)+'%'}}"></view>
  <view class="bar-text" style="color: {{textColor}};">{{percentage}}%</view>
</view>