Progress 进度条

规则

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

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

代码演示

基本

import { NavBar, Progress, WhiteSpace, Button, Flex, WingBlank } from 'antd-mobile';
const MyProgress = React.createClass({
  getInitialState() {
    return {
      percent: 0,
    };
  },
  increase() {
    let percent = this.state.percent + 10;
    if (percent > 100) {
      percent = 100;
    }
    this.setState({ percent, status });
  },
  decline() {
    let percent = this.state.percent - 10;
    if (percent < 0) {
      percent = 0;
    }
    this.setState({ percent, status });
  },
  render() {
    return (
      <div className="progress-container">
        <div>
          <NavBar iconName={false} mode="light">未填充无色</NavBar>
          <Progress percent={this.state.percent} position="fixed" />
        </div>
        <Progress percent={this.state.percent} position="normal" unfilled="hide" />
        <WhiteSpace size="lg" />
        <WhiteSpace size="lg" />
        <NavBar iconName={false} mode="light">未填充有色</NavBar>
        <Progress percent={this.state.percent} position="normal" />
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Flex>
            <Flex.Item>
              <Button style={{ fontSize: '0.56rem' }} onClick={this.increase}> + </Button>
            </Flex.Item>
            <Flex.Item>
              <Button style={{ fontSize: '0.56rem' }} onClick={this.decline}> - </Button>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    );
  },
});
ReactDOM.render(<MyProgress />, mountNode);

API