Popup 弹出层

代码演示

向下弹出效果

import { Popup, List, Button, InputItem } from 'antd-mobile';
class PopupContent extends React.Component {
  state = {
    sel: '',
  };
  onSel = (sel) => {
    this.setState({ sel });
    this.props.onClose();
  };
  render() {
    return (
      <List renderHeader={() => `账户总览，选择了：${this.state.sel}`}>
        <List.Item
          thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
          onClick={() => { this.onSel('东吴证券'); }}
        >东吴证券</List.Item>
        <List.Item
          thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
          onClick={() => { this.onSel('西吴证券'); }}
        >西吴证券</List.Item>
        <InputItem value={this.state.val} onChange={val => this.setState({ val })}>输入内容</InputItem>
      </List>
    );
  }
}
const Test = () => {
  const onMaskClose = () => {
    console.log('onMaskClose');
    // also support Promise
    // return new Promise((resolve) => {
    //   console.log('1000ms 后关闭');
    //   setTimeout(resolve, 1000);
    // });
  };
  const onClick = (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    Popup.show(<PopupContent onClose={() => Popup.hide()} />, { onMaskClose });
  };
  // newInstance() {
  //  const ins = Popup.newInstance();
  //  ins.show(<Button onClick={() => ins.hide()}>关闭</Button>);
  // },
  return (
    <div style={{ padding: '0.3rem' }}>
      <Button onClick={onClick}>显示</Button>
    </div>
  );
};
ReactDOM.render(<Test />, mountNode);

向上弹出效果

import { Popup, List, Button, Icon } from 'antd-mobile';
// fix touch to scroll background page on iOS
// https://github.com/ant-design/ant-design-mobile/issues/307
// https://github.com/ant-design/ant-design-mobile/issues/163
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let maskProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  maskProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
class Test extends React.Component {
  state = {
    sel: '',
  };
  renderHeader = () => (
    <div style={{ position: 'relative' }}>
      委托买入
      <span
        style={{
          position: 'absolute', right: 3, top: -5,
        }}
        onClick={() => this.onClose('cancel')}
      >
        <Icon type="cross" />
      </span>
    </div>
  );
  onClick = () => {
    Popup.show(<div>
      <List renderHeader={this.renderHeader}
        className="popup-list"
      >
        {['股票名称', '股票代码', '买入价格', '买入数量', '更多', '更多'].map((i, index) => (
          <List.Item key={index}>{i}</List.Item>
        ))}
      </List>
      <ul style={{ padding: '0.18rem 0.3rem', listStyle: 'none' }}>
        <li>投资说明投资说明...</li>
        <li style={{ marginTop: '0.18rem' }}>
          <Button type="primary" onClick={() => this.onClose('cancel')}>买入</Button>
        </li>
      </ul>
    </div>, { animationType: 'slide-up', maskProps, maskClosable: false });
  };
  onClose = (sel) => {
    this.setState({ sel });
    Popup.hide();
  };
  render() {
    return (<div style={{ padding: '0.3rem' }}>
      <Button onClick={this.onClick}>显示</Button>
    </div>);
  }
}
ReactDOM.render(<Test />, mountNode);

.popup-list .am-list-body {
  height: 4.2rem;
  overflow: auto;
}

API

static show(content: React.Element, options: Object):

options可选项：

• animationType (string) - 可选 slide-down (默认)、slide-up 弹出动画类型

• transitionName (string) (web only) 自定义显示隐藏变换动画

• maskTransitionName (string) (web only) 自定义遮罩层变换动画

• onMaskClose (function) 遮罩层关闭时的回调，支持返回 Promise

• maskClosable (bool) - 点击蒙层是否允许关闭，默认允许

• show (function) - 同 static show

• hide (function) - 同 static hide