Progress 进度条

用于展现某个任务的当前进度。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Progress",
    "usingComponents": {
        "wux-white-space": "../../dist/white-space/index",
        "wux-button": "../../dist/button/index",
        "wux-progress": "../../dist/progress/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">Progress</view>
        <view class="page__desc">进度条</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Status</view>
        <wux-progress status="normal" percent="50" />
        <wux-white-space />
        <wux-progress status="progress" percent="50" />
        <wux-white-space />
        <wux-progress status="error" percent="50" />
        <wux-white-space />
        <wux-progress status="success" percent="50" />
        <view class="sub-title">ActiveColor</view>
        <wux-progress active-color="#11c1f3" percent="50" />
        <wux-white-space />
        <wux-progress active-color="#ffc900" percent="50" />
        <wux-white-space />
        <wux-progress active-color="#886aea" percent="50" />
        <view class="sub-title">BackgroundColor</view>
        <wux-progress background-color="#fff" percent="25" />
        <wux-white-space />
        <wux-progress background-color="#f3f3f3" percent="50" />
        <wux-white-space />
        <wux-progress background-color="#f8f8f8" percent="75" />
        <view class="sub-title">Shape</view>
        <wux-progress shape="square" percent="25" />
        <wux-white-space />
        <wux-progress shape="square" percent="50" />
        <wux-white-space />
        <wux-progress shape="square" percent="75" />
        <view class="sub-title">BarStyle</view>
        <wux-progress bar-style="background-color: #5cb85c" percent="25" />
        <wux-white-space />
        <wux-progress bar-style="background-color: #5bc0de" percent="50" />
        <wux-white-space />
        <wux-progress bar-style="background-color: #f0ad4e" percent="75" />
        <view class="sub-title">StrokeWidth</view>
        <wux-progress stroke-width="8" percent="25" />
        <wux-white-space />
        <wux-progress stroke-width="10" percent="50" />
        <wux-white-space />
        <wux-progress stroke-width="12" percent="75" />
        <view class="sub-title">ShowInfo</view>
        <wux-progress show-info percent="{{ percent }}" />
        <wux-progress show-info percent="{{ percent }}" />
        <wux-progress show-info percent="{{ percent }}" />
        <wux-button block type="light" bind:click="add">Add</wux-button>
    </view>
</view>

Page({
    data: {
        percent: 50,
    },
    add() {
        let percent = this.data.percent + 10
        if (this.data.percent >= 100) {
            percent = 0
        }
        this.setData({
            percent,
        })
    },
})

视频演示

Progress

API

Progress props

Progress externalClasses