百度智能小程序 進(jìn)度條

progress 進(jìn)度條

解釋?zhuān)哼M(jìn)度條

屬性說(shuō)明

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1： 默認(rèn)樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默認(rèn)樣式</view>
        <progress class="progress" percent="20" activeColor="#3c76ff" />
    </view>
</view>

代碼示例 2： 顯示當(dāng)前百分比

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>顯示當(dāng)前百分比</view>
            <view>show-info</view>
        </view>
        <!-- 請(qǐng)調(diào)試基礎(chǔ)版本為3.150.1以上查看 font-size="13" 的效果 -->
        <progress class="progress" percent="40" font-size="13" activeColor="#3c76ff" show-info active />
    </view>
</view>

代碼示例 3： 自定義樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定義樣式</view>
            <view>stroke-width="7" activeColor="#00BC89"</view>
        </view>
        <!-- 基礎(chǔ)版本為3.150.1以上外層圓角用屬性設(shè)置，以下用css設(shè)置 -->
        <progress class="progress" percent="60" border-radius="90" activeColor="#00BC89" backgroundColor="#E6E6E6" stroke-width="7" active />
    </view>
</view>

.progress {
    margin: .35rem .23rem;
}
.progress-bar, // 外層圓角設(shè)置
.progress-inner-bar {
    border-radius: 30rpx;
}

代碼示例 4： 顯示動(dòng)畫(huà)

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">顯示動(dòng)畫(huà)</view>
        <progress class="progress" duration="10" percent="70" color="#38f" active active-mode="backwards" />
        <progress class="progress" percent="80" color="#38f" active active-mode="forwards" />
    </view>
</view>

參考示例

在開(kāi)發(fā)者工具中打開(kāi)

圖片示例

參考示例：設(shè)置圓角 progress

<view class="wrap">
    <progress class="progress" percent="60" activeColor="#3c76ff" stroke-width="10" active />
</view>

.wrap {
    padding: 0.3rem 0.15rem;
}
.progress-bar, //外層圓角
.progress-inner-bar {//內(nèi)層圓角
    border-radius: 30rpx;
}