Grid 九宫格

在水平和垂直方向，将布局切分成若干等大的区块。

规则

  • 区块中的内容应该是同类元素，eg：都是图片，或者都是图标+文字。

代码演示

基本

  1. import { Grid } from 'antd-mobile';
  3. const data1 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. const GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid data={data1} />
  51.     </div>);
  52.   },
  53. });
  55. ReactDOM.render(<GridExample />, mountNode);

没有边线

  1. import { Grid } from 'antd-mobile';
  3. const data2 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. const GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data2}
  52.         hasLine={false}
  53.         columnNum={3}
  54.       />
  55.     </div>);
  56.   },
  57. });
  59. ReactDOM.render(<GridExample />, mountNode);

走马灯有边线

  1. import { Grid } from 'antd-mobile';
  3. const data3 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. const GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data3}
  52.         columnNum={3}
  53.         carouselMaxRow={3}
  54.         isCarousel
  55.         onClick={(el, index) => { alert(index); }}
  56.       />
  57.     </div>);
  58.   },
  59. });
  61. ReactDOM.render(<GridExample />, mountNode);

走马灯没有边线

  1. import { Grid } from 'antd-mobile';
  3. const data4 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     text: '名字',
  7.     link: 'hehe',
  8.   }, {
  9.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  10.     text: '名字',
  11.     link: 'hehe',
  12.   }, {
  13.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  14.     text: '名字',
  15.     link: 'hehe',
  16.   }, {
  17.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  18.     text: '名字',
  19.     link: 'hehe',
  20.   }, {
  21.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     text: '名字',
  27.     link: 'hehe',
  28.   }, {
  29.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  30.     text: '名字',
  31.     link: 'hehe',
  32.   }, {
  33.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  34.     text: '名字',
  35.     link: 'hehe',
  36.   }, {
  37.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  38.     text: '名字',
  39.     link: 'hehe',
  40.   }, {
  41.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  42.     text: '名字',
  43.     link: 'hehe',
  44.   },
  45. ];
  47. const GridExample = React.createClass({
  48.   render() {
  49.     return (<div>
  50.       <Grid
  51.         data={data4}
  52.         hasLine={false}
  53.         isCarousel
  54.       />
  55.     </div>);
  56.   },
  57. });
  59. ReactDOM.render(<GridExample />, mountNode);

自定义

  1. import { Grid } from 'antd-mobile';
  3. const data1 = [
  4.   {
  5.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  6.     img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
  7.     text: '名字',
  8.     link: 'hehe',
  9.   }, {
  10.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  11.     img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
  12.     text: '名字',
  13.     link: 'hehe',
  14.   }, {
  15.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  16.     img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
  17.     text: '名字',
  18.     link: 'hehe',
  19.   }, {
  20.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  21.     img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
  22.     text: '名字',
  23.     link: 'hehe',
  24.   }, {
  25.     icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
  26.     img: 'https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png',
  27.     text: '名字',
  28.     link: 'hehe',
  29.   },
  30. ];
  32. const GridExample = React.createClass({
  33.   render() {
  34.     return (<div>
  35.       <Grid
  36.         data={data1}
  37.         columnNum={3}
  38.         hasLine={false}
  39.         renderItem={(dataItem, index) => (
  40.           <div style={{ margin: '16px', background: '#f7f7f7', textAlign: 'center' }}>
  41.             <div style={{ background: 'rgba(0, 0, 0, 0.1)', padding: '8px' }}>
  42.               <span>{index + 1}.{dataItem.text}</span>
  43.             </div>
  44.             <img src={dataItem.img} style={{ width: '80%', margin: '12px' }} />
  45.           </div>
  46.         )}
  47.       />
  48.     </div>);
  49.   },
  50. });
  52. ReactDOM.render(<GridExample />, mountNode);

Grid九宫格 - 图1

API

Grid

成员说明类型可选值默认值
data传入的菜单数据Array,每个元素必须包含icon,和text两个key[]
onClick点击每个菜单的回调Function(el, index)
columnNum列数number4
hasLine是否有边框booleantrue
isCarousel是否跑马灯,booleanfalse
carouselMaxRow如果是跑马灯, 一页跑马灯需要展示的行数number2
renderItem自定义每个grid的条目的创建Function(el, index), 返回一个React.Element