PageResult 结果页

定义／Definition

代码演示

出错

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <PageResult
    imgUrl="https://os.alipayobjects.com/rmsportal/SgCjcxAQTmmNUWi.png"
    title="加载出错"
    buttonTxt="重新加载"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<PageResultExample />, mountNode);

系统繁忙

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <PageResult
    imgUrl="https://os.alipayobjects.com/rmsportal/awwrfcIKXAKwGyx.png"
    title="系统繁忙"
    buttonTxt="重新加载"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<PageResultExample />, mountNode);

404

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <PageResult
    imgUrl="https://os.alipayobjects.com/rmsportal/awwrfcIKXAKwGyx.png"
    title="系统繁忙"
    buttonTxt="重新加载"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<PageResultExample />, mountNode);

空白页

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <PageResult
    imgUrl="https://os.alipayobjects.com/rmsportal/dlMevdYPbXUwgCQ.png"
    title="空白页"
    brief="可各业务自定义文案"
    buttonTxt="重新加载"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<PageResultExample />, mountNode);

断线

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <PageResult
    imgUrl="https://os.alipayobjects.com/rmsportal/XMUAssczvVftDHX.png"
    title="网络无法连接"
    brief="请查看网络连接或稍后重试"
    buttonTxt="刷新"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<PageResultExample />, mountNode);

其他自定义样式

import { PageResult } from 'antd-mobile';
const PageResultExample = () => (
  <div className="other">
    <PageResult
      imgUrl="https://os.alipayobjects.com/rmsportal/MKXqtwNOLFmYmrY.png"
      title="内容为空"
      brief="可各业务自定义文案"
      buttonTxt="重新尝试"
      buttonClick={() => alert('点击了按钮')}
    />
    <PageResult
      imgUrl="https://os.alipayobjects.com/rmsportal/hcEPreZxgZWxhVw.png"
      title="警示"
      brief="可各业务自定义文案"
      buttonTxt="重新加载"
      buttonClick={() => alert('点击了按钮')}
    />
    <PageResult
      imgUrl="https://os.alipayobjects.com/rmsportal/QGxGZRxaqMRKnjS.png"
      title="网络不给力"
      brief="请查看网络连接或稍后重试"
      buttonTxt="重新尝试"
      buttonClick={() => alert('点击了按钮')}
    />
  </div>
);
ReactDOM.render(<PageResultExample />, mountNode);

.other .am-page-result {
  border-bottom: 8px solid #e9e9e9;
}

API

PageResult