List 列表

定义／Definition

列表以一致的格式来显示一组相关的内容，为一致性的类型或者一组内容指定优先顺序来体现层次感以获取更好的可读性。列表也可以包含多行的文本，并且文本的字数可以在同一列表的不同瓦片间有所不同。

规则 / Rule

确保内容列对齐，文字左对齐，数字右对齐。

代码演示

基本

最简单的用法。 

  1. import { List, Switch } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let ListExample = React.createClass({
  5.   render() {
  6.     const { getFieldProps } = this.props.form;
  7.     return (<form>
  8.       <List>
  9.         <List.Header>列表头部,List.Header</List.Header>
  10.         <List.Body>
  11.           <List.Item
  12.             extra={null}
  13.           >标题文字,没有配置onClick则点击无反馈</List.Item>
  14.           <List.Item
  15.             onClick={() => {}}
  16.             extra={undefined}
  17.           >标题文字</List.Item>
  18.           <List.Item
  19.             extra="内容内容"
  20.             onClick={() => {}}
  21.           >标题文字</List.Item>
  22.         </List.Body>
  23.         <List.Footer>列表尾部,List.Footer</List.Footer>
  24.       </List>
  25.       <List>
  26.         <List.Header>下拉框</List.Header>
  27.         <List.Body>
  28.           <List.Item
  29.             extra={<select style={{ direction: 'rtl' }}
  30.               {...getFieldProps('select1', {
  31.                 initialValue: 1,
  32.               })}
  33.             >
  34.               <option value="1">选项1</option>
  35.               <option value="2">选项2</option>
  36.               <option value="3">选项3</option>
  37.             </select>}
  38.             arrow="horizontal"
  39.           >下拉框</List.Item>
  40.           <List.Item
  41.             extra={<select style={{ direction: 'rtl' }} defaultValue="2">
  42.               <option value="1">选项1</option>
  43.               <option value="2">选项2</option>
  44.               <option value="3" disabled>选项3不可选</option>
  45.             </select>}
  46.             arrow="horizontal"
  47.           >下拉框</List.Item>
  48.           <List.Item
  49.             arrow="horizontal"
  50.           >
  51.             <select defaultValue="3">
  52.               <option value="1">选项1</option>
  53.               <option value="2" disabled>选项2不可选</option>
  54.               <option value="3">选项3</option>
  55.             </select>
  56.           </List.Item>
  57.         </List.Body>
  58.       </List>
  59.       <List>
  60.         <List.Header>滑动开关Switch</List.Header>
  61.         <List.Body>
  62.           <List.Item
  63.             extra={<Switch
  64.               {...getFieldProps('1', {
  65.                 initialValue: true,
  66.                 valuePropName: 'checked',
  67.               })}
  68.             />}
  69.           >默认开</List.Item>
  70.           <List.Item
  71.             extra={<Switch
  72.               {...getFieldProps('2', {
  73.                 initialValue: false,
  74.                 valuePropName: 'checked',
  75.               })}
  76.             />}
  77.           >默认关</List.Item>
  78.           <List.Item
  79.             extra={<Switch
  80.               {...getFieldProps('3', {
  81.                 initialValue: false,
  82.                 valuePropName: 'checked',
  83.               })}
  84.               disabled
  85.             />}
  86.           >默认关,不可修改</List.Item>
  87.           <List.Item
  88.             extra={<Switch
  89.               {...getFieldProps('4', {
  90.                 initialValue: true,
  91.                 valuePropName: 'checked',
  92.               })}
  93.               disabled
  94.             />}
  95.           >默认开,不可修改</List.Item>
  96.         </List.Body>
  97.       </List>
  98.       <List>
  99.         <List.Header>带缩略图</List.Header>
  100.         <List.Body>
  101.           <List.Item
  102.             thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
  103.             arrow="horizontal"
  104.           >thumb</List.Item>
  105.           <List.Item
  106.             thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
  107.           >thumb</List.Item>
  108.           <List.Item
  109.             icon=""
  110.             extra={<img src="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png" width="28" height="28" />}
  111.             arrow="horizontal"
  112.           >extra为&lt;img /&gt;标签</List.Item>
  113.         </List.Body>
  114.       </List>
  115.     </form>);
  116.   },
  117. });
  119. ListExample = createForm()(ListExample);
  121. ReactDOM.render(<ListExample />, mountNode);
  1. /** hack for antd responsive conflict */ 
  2. @media only screen and (max-width: 767px) and (min-width: 320px) {
  3. #list {
  4.     display: block;
  5. }
  6. }

箭头

单行列表 

  1. import { List } from 'antd-mobile';
  3. window.clickItem = (e) => {
  4.   console.log(e);
  5.   console.log(this);
  6.   console.log(ReactDOM.findDOMNode(this));
  7.   console.log($(ReactDOM.findDOMNode(this)).find('.am-list-extra'));
  8.   $(ReactDOM.findDOMNode(this)).find('.am-list-extra').css('color', 'red');
  9. };
  10. window.openurl = (e) => {
  11.   e.preventDefault();
  12.   let target = e.target;
  13.   if (!$(target).hasClass('am-list-item')) {
  14.     target = $(target).parents('.am-list-item')[0];
  15.   }
  16.   window.location.href = target.href;
  17. };
  18. ReactDOM.render(
  19.   <div>
  20.     <List>
  21.       <List.Header>箭头</List.Header>
  22.       <List.Body>
  23.         <List.Item extra="horizontal,箭头向右" arrow="horizontal" onClick={() => {}}>标题文字</List.Item>
  24.         <List.Item extra="down,箭头向下" arrow="down" onClick={() => {}}>标题文字</List.Item>
  25.         <List.Item extra="up,箭头向上" arrow="up" onClick={() => {}}>标题文字</List.Item>
  26.         <List.Item
  27.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div></div>}
  28.           arrow="horizontal"
  29.           onClick={() => {}}
  30.         ><div className="am-list-title">标题文字</div><div className="am-list-brief">辅助文字内容</div></List.Item>
  31.         <List.Item
  32.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div></div>}
  33.           arrow="down"
  34.           onClick={() => {}}
  35.         ><div className="am-list-title">标题文字</div><div className="am-list-brief">辅助文字内容</div></List.Item>
  36.         <List.Item
  37.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div></div>}
  38.           arrow="up"
  39.           error
  40.           onClick={() => {}}
  41.         ><div className="am-list-title">标题文字</div><div className="am-list-brief">辅助文字内容</div></List.Item>
  42.         <List.Item
  43.           extra="empty,有箭头坑位"
  44.           arrow="empty"
  45.           onClick={() => {}}
  46.         >内容内容</List.Item>
  47.         <List.Item
  48.           extra="校验报错"
  49.           error
  50.           onClick={() => {}}
  51.         >内容内容</List.Item>
  52.       </List.Body>
  53.     </List>
  54.   </div>
  55. , mountNode);

对齐

双行列表 

  1. import { List, Button } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div>
  5.     <List >
  6.       <List.Header>对齐</List.Header>
  7.       <List.Body>
  8.         <List.Item
  9.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div><div className="am-list-brief">辅助文字内容</div></div>}
  10.           arrow="horizontal"
  11.           onClick={() => {}}
  12.         >垂直居中对齐</List.Item>
  13.         <List.Item
  14.           extra="内容内容"
  15.           arrow="horizontal"
  16.           onClick={() => {}}
  17.         ><div>垂直居中对齐<div className="am-list-brief">辅助文字内容</div><div className="am-list-brief">辅助文字内容</div></div></List.Item>
  18.         <List.Item
  19.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div><div className="am-list-brief">辅助文字内容</div></div>}
  20.           arrow="horizontal"
  21.           align="top"
  22.           onClick={() => {}}
  23.         >顶部对齐</List.Item>
  24.         <List.Item
  25.           extra="内容内容"
  26.           arrow="horizontal"
  27.           align="top"
  28.           onClick={() => {}}
  29.         ><div>顶部对齐<div className="am-list-brief">辅助文字内容</div></div></List.Item>
  30.         <List.Item
  31.           extra={<div>内容内容<div className="am-list-brief">辅助文字内容</div></div>}
  32.           arrow="horizontal"
  33.           align="bottom"
  34.           onClick={() => {}}
  35.         >底部对齐</List.Item>
  36.         <List.Item
  37.           extra="内容内容"
  38.           arrow="horizontal"
  39.           align="bottom"
  40.           onClick={() => {}}
  41.         ><div>底部对齐<div className="am-list-brief">辅助文字内容</div></div></List.Item>
  42.         <List.Item
  43.           onClick={() => {}}
  44.           extra={<Button
  45.             size="small"
  46.             inline
  47.             onClick={() => alert(111)}
  48.           >按钮</Button>}
  49.         ><div><div className="am-list-title">区域经理</div><div className="am-list-brief">可进行收款、退款、折扣管理、查看数据等操作</div></div></List.Item>
  50.       </List.Body>
  51.     </List>
  52.   </div>
  53. , mountNode);

业务示例

一个业务上使用的示例。 

  1. import { List } from 'antd-mobile';
  3. ReactDOM.render(
  4.   <div>
  5.     <List>
  6.       <List.Body>
  7.         <List.Item
  8.           extra="鹿港小镇"
  9.           arrow="horizontal"
  10.           onClick={() => {}}
  11.         >所属门店</List.Item>
  12.         <List.Item
  13.           extra="张三"
  14.           arrow="empty"
  15.           onClick={() => {}}
  16.         >员工姓名</List.Item>
  17.         <List.Item
  18.           extra="收银员"
  19.           arrow="empty"
  20.           onClick={() => {}}
  21.         >员工角色</List.Item>
  22.         <List.Item
  23.           extra="13838383756"
  24.           arrow="empty"
  25.           onClick={() => {}}
  26.         >员工手机</List.Item>
  27.         <List.Item
  28.           extra="只可退自己的"
  29.           arrow="empty"
  30.           onClick={() => {}}
  31.         >退款权限</List.Item>
  32.         <List.Item
  33.           extra="其他权限"
  34.           arrow="horizontal"
  35.           onClick={() => {}}
  36.         >文本信息</List.Item>
  37.         <List.Item
  38.           extra={<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAm0lEQVR4Ae2Whw0DMQwD5Q24gfbfRTslaPlGCGb6vyAe2tdzty1uArAlyz2RMgJLoggsSTUBfUwCSkD49jKCFnhgYegCaZgSIAGlokCHBDk1BR6YspMteHIfRqWbhMc714Y/aMF/Bdgw5mJh5HgmU2u2qITatEAQCEvCe53cp+v3T9ct0E92HH01bcGlBIEVRfDWMGUBU0aQ04I7BEwkp1QhR1sAAAAASUVORK5CYII=" width="29" height="29" />}
  39.           arrow="horizontal"
  40.           onClick={() => {}}
  41.         >员工二维码</List.Item>
  42.         <List.Item
  43.           extra={<div><div className="am-list-title">zhifubao@alipay.com#</div><div className="am-list-brief">001</div></div>}
  44.           arrow="horizontal"
  45.           onClick={() => {}}
  46.         >垂直居中对齐</List.Item>
  47.         <List.Item
  48.           extra={<div><div className="am-list-title">zhifubao@alipay.com#</div><div className="am-list-brief">001</div></div>}
  49.           arrow="horizontal"
  50.           align="top"
  51.           onClick={() => {}}
  52.         >顶部对齐</List.Item>
  53.         <List.Item
  54.           extra={<div><div className="am-list-title">zhifubao@alipay.com#</div><div className="am-list-brief">001</div></div>}
  55.           arrow="horizontal"
  56.           align="bottom"
  57.           onClick={() => {}}
  58.         >底部对齐</List.Item>
  59.         <List.Item
  60.           extra={<div><div className="am-list-title">zhifubao@alipay.com#</div><div className="am-list-brief">001</div></div>}
  61.           arrow="horizontal"
  62.           align="top"
  63.           onClick={() => {}}
  64.         ><div className="am-list-title am-list-multiline">zhifubao@alipay.com#zh#</div></List.Item>
  65.       </List.Body>
  66.     </List>
  67.   </div>
  68. , mountNode);

List列表 - 图1

API

List

成员说明类型默认值
无

List.Header

成员说明类型默认值
无

List.Body

成员说明类型默认值
无
成员说明类型默认值
无

List.Item

成员说明类型可选值默认值
thumb缩略图imgsrc无
extra右边内容String/HTML无
arrow箭头方向（右,上,下）,如果是empty,则存在对应的dom,但是不显示Stringhorizontal、up、down、empty、无无
alignFlex 子元素垂直对齐Stringtopmiddlebottommiddle
onClick点击事件的回调函数Function无
error报错样式,右侧文字颜色变成橙色Booleantrue、falsefalse