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>

總結

以上是生活随笔為你收集整理的原生进度条 微信小程序实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。