Progress 进度条

规则

• 需要准确告知当前进度，否则应该使用组件 ActivityIndicator。

• 和 NavBar 一起搭配使用时，可以隐藏 Progress 未填充部分的轨道，提升整体感。

代码演示

基本

import { Progress, Button } from 'antd-mobile';
class MyProgress extends React.Component {
  state = {
    percent: 50,
  };
  add = () => {
    let p = this.state.percent + 10;
    if (this.state.percent >= 100) {
      p = 0;
    }
    this.setState({ percent: p });
  }
  render() {
    const { percent } = this.state;
    return (
      <div className="progress-container">
        <Progress percent={30} position="fixed" />
        <div style={{ height: 36 }} />
        <Progress percent={40} position="normal" unfilled="hide" appearTransition />
        <div className="show-info">
          <div className="progress"><Progress percent={percent} position="normal" /></div>
          <div aria-hidden="true">{percent}%</div>
        </div>
        <Button inline style={{ marginTop: 20, marginLeft: 30 }} onClick={this.add}>(+-)10</Button>
      </div>
    );
  }
}
ReactDOM.render(<MyProgress />, mountNode);

.show-info {
  margin-top: 0.36rem;
  display: flex;
  align-items: center;
}
.show-info .progress {
  margin-right: 0.1rem;
  width: 100%;
}

API