Popup 弹出层

规则

• 提供清晰的关闭按钮。

• Popup 会打断用户操作，所以用在重要的时候， eg.买入股票。

代码演示

向下弹出效果

import { Popup, List, Button, InputItem } from 'antd-mobile';
const PopupContent = React.createClass({
  getInitialState() {
    return {
      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 = React.createClass({
  onClick(e) {
    e.preventDefault(); // 修复 Android 上点击穿透
    Popup.show(<PopupContent onClose={() => Popup.hide()} />, { onMaskClose: this.onMaskClose });
  },
  onMaskClose() {
    console.log('onMaskClose');
    // also support Promise
    // return new Promise((resolve) => {
    //   console.log('1000ms 后关闭');
    //   setTimeout(resolve, 1000);
    // });
  },
  // newInstance() {
  //  const ins = Popup.newInstance();
  //  ins.show(<Button onClick={() => ins.hide()}>关闭</Button>);
  // },
  render() {
    return (<div style={{ padding: '0.15rem' }}>
      <Button onClick={this.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 wrapProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  wrapProps = {
    // onTouchStart: e => e.preventDefault(),
  };
}
const Test = React.createClass({
  getInitialState() {
    return {
      sel: '',
    };
  },
  onClick() {
    Popup.show(<div>
      <List renderHeader={() => (
        <div style={{ position: 'relative' }}>
          委托买入
          <span
            style={{
              position: 'absolute', right: 3, top: -5,
            }}
            onClick={() => this.onClose('cancel')}
          >
            <Icon type="cross" />
          </span>
        </div>)}
        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', wrapProps, maskClosable: false });
  },
  onClose(sel) {
    this.setState({ sel });
    Popup.hide();
  },
  render() {
    return (<div style={{ padding: '0.15rem' }}>
      <Button onClick={this.onClick}>显示</Button>
    </div>);
  },
});
ReactDOM.render(<Test />, mountNode);

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

API ( 适用平台：WEB、React-Native )

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

options可选项：

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

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

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

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

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

static hide(): 关闭 Popup

static newInstance() (web only)

• show (function) - 同 static show

• hide (function) - 同 static hide