List 列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

规则

  • 一般由主要信息、主要操作、次要信息、次要操作组成。

  • 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

代码演示

列表项类表单组件大集合(rc-form的基础用法请查看源码)

表单集合. (rc-form 文档，更多用法请详细阅读此文档) 

  1. import { List, InputItem, Switch, Stepper, Slider, Radio, TextareaItem, WingBlank, WhiteSpace, Button } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let BasicInput = React.createClass({
  5.   getInitialState() {
  6.     return {
  7.       disabled: false,
  8.       value: 1,
  9.     };
  10.   },
  11.   handleChange(e) {
  12.     if (e.target.checked) {
  13.       this.setState({
  14.         value: 1,
  15.       });
  16.     }
  17.   },
  18.   handleChange2(e) {
  19.     if (e.target.checked) {
  20.       this.setState({
  21.         value: 2,
  22.       });
  23.     }
  24.   },
  25.   onSubmit() {
  26.     this.props.form.validateFields({ force: true }, (error, values) => {
  27.       if (!error) {
  28.         const formValue = this.props.form.getFieldsValue();
  29.         console.log(values);
  30.         console.log(formValue);
  31.       } else {
  32.         alert('校验失败');
  33.       }
  34.     });
  35.   },
  36.   onReset() {
  37.     this.props.form.resetFields();
  38.     alert('重制完成');
  39.   },
  40.   validateAccount(rule, value, callback) {
  41.     if (value && value.length > 4) {
  42.       callback();
  43.     } else {
  44.       callback(new Error('帐号至少4个字符'));
  45.     }
  46.   },
  47.   render() {
  48.     const { getFieldProps, getFieldError } = this.props.form;
  50.     return (<div>
  51.       <List
  52.         title="表单输入项"
  53.         footer={getFieldError('account') && getFieldError('account').join(',')}
  54.       >
  55.         <InputItem
  56.           {...getFieldProps('account', {
  57.             initialValue: '小蚂蚁',
  58.             rules: [
  59.               { required: true, message: '请输入帐号' },
  60.               { validator: this.validateAccount },
  61.             ],
  62.           })}
  63.           clear
  64.           error={!!getFieldError('account')}
  65.           onErrorClick={() => {
  66.             alert(getFieldError('account').join('、'));
  67.           }}
  68.         >帐号</InputItem>
  69.         <InputItem
  70.           {...getFieldProps('password')}
  71.           clear
  72.           placeholder="请输入密码"
  73.           type="password"
  74.         >密码</InputItem>
  75.         <InputItem
  76.           {...getFieldProps('input1', {
  77.             initialValue: '1245',
  78.           })}
  79.           clear
  80.           error
  81.           placeholder="校验样式"
  82.           type="password"
  83.         >密码</InputItem>
  84.       </List>
  85.       <List
  86.         title="表单展示项"
  87.       >
  88.         <List.Item
  89.           thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
  90.           arrow="horizontal"
  91.         >我的钱包</List.Item>
  92.         <List.Item
  93.           thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
  94.           arrow="horizontal"
  95.         >我的花销占比</List.Item>
  96.       </List>
  97.       <List
  98.         title="表单控件"
  99.       >
  100.         <List.Item
  101.           extra={<Switch
  102.             {...getFieldProps('1', {
  103.               initialValue: true,
  104.               valuePropName: 'checked',
  105.             })}
  106.           />}
  107.         >使用 Ant Desgin Component</List.Item>
  108.         <List.Item>
  109.           <Slider range defaultValue={[20, 50]} />
  110.         </List.Item>
  111.         <List.Item
  112.           extra={<Stepper showNumber size="small" max={10} min={1} defaultValue={20} onChange={() => {}} />}
  113.         >预定人数</List.Item>
  114.       </List>
  115.       <List>
  116.         <TextareaItem
  117.           {...getFieldProps('note7', {
  118.             initialValue: '如果你有什么建议意见,欢迎你来吐槽',
  119.           })}
  120.           labelNumber={4}
  121.           name="yyy"
  122.           rows={5}
  123.           placeholder="计数功能"
  124.           clear
  125.           count={100}
  126.           onBlur={() => { console.log('onBlur'); }}
  127.           onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  128.         />
  129.       </List>
  130.       <List
  131.         title="列表单选"
  132.       >
  133.         <Radio.RadioItem
  134.           checked={this.state.value === 1}
  135.           onChange={this.handleChange}
  136.           disabled={this.state.disabled}
  137.         >
  138.           选项一
  139.         </Radio.RadioItem>
  140.         <Radio.RadioItem
  141.           checked={this.state.value === 2}
  142.           onChange={this.handleChange2}
  143.           disabled={this.state.disabled}
  144.         >
  145.           选项二
  146.         </Radio.RadioItem>
  147.         <Radio.RadioItem
  148.           checked
  149.           onChange={this.handleChange}
  150.           disabled
  151.         >
  152.           选项三
  153.         </Radio.RadioItem>
  154.         <Radio.RadioItem
  155.           checked={false}
  156.           onChange={this.handleChange}
  157.           disabled
  158.         >
  159.           选项四
  160.         </Radio.RadioItem>
  161.       </List>
  162.       <WhiteSpace />
  163.       <WingBlank size="lg">
  164.         <Button type="primary" onClick={this.onSubmit}>提交验证</Button>
  165.         <WhiteSpace />
  166.         <Button onClick={this.onReset}>重置</Button>
  167.       </WingBlank>
  168.       <WhiteSpace />
  169.       <WhiteSpace />
  170.     </div>);
  171.   },
  172. });
  174. BasicInput = createForm()(BasicInput);
  175. ReactDOM.render(<BasicInput />, mountNode);

基本

基本用法. (rc-form 文档) 

  1. import { List } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let ListExample = React.createClass({
  5.   render() {
  6.     return (<form>
  7.       <List
  8.         title="我是华丽丽的列表头部"
  9.         footer="我是列表尾部"
  10.       >
  11.         <List.Item>没有设置onClick则点击无反馈，文字超长则隐藏</List.Item>
  12.         <List.Item wrap>文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</List.Item>
  13.         <List.Item
  14.           onClick={() => {}}
  15.           extra={undefined}
  16.         >标题文字</List.Item>
  17.         <List.Item
  18.           extra="内容内容"
  19.           onClick={() => {}}
  20.           arrow="horizontal"
  21.         >标题文字</List.Item>
  22.       </List>
  23.       <List
  24.         title="下拉框"
  25.       >
  26.         <List.Item
  27.           extra={<select style={{ direction: 'rtl' }} defaultValue="2">
  28.             <option value="1">选项1</option>
  29.             <option value="2">选项2</option>
  30.             <option value="3" disabled>选项3不可选</option>
  31.           </select>}
  32.           arrow="horizontal"
  33.         >下拉框</List.Item>
  34.         <List.Item
  35.           arrow="horizontal"
  36.         >
  37.           <select defaultValue="3">
  38.             <option value="1">选项1</option>
  39.             <option value="2" disabled>选项2不可选</option>
  40.             <option value="3">选项3</option>
  41.           </select>
  42.         </List.Item>
  43.       </List>
  44.       <List
  45.         title="带缩略图"
  46.       >
  47.         <List.Item
  48.           thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
  49.           arrow="horizontal"
  50.           onClick={() => {}}
  51.         >thumb</List.Item>
  52.         <List.Item
  53.           thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
  54.         >thumb</List.Item>
  55.         <List.Item
  56.           icon=""
  57.           extra={<img src="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png" width="28" height="28" />}
  58.           arrow="horizontal"
  59.         >extra为img标签</List.Item>
  60.       </List>
  61.     </form>);
  62.   },
  63. });
  65. ListExample = createForm()(ListExample);
  67. 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.       title="箭头方向"
  22.     >
  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>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
  28.         arrow="horizontal"
  29.         onClick={() => {}}
  30.         multipleLine
  31.       >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
  32.       <List.Item
  33.         extra={<div>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
  34.         arrow="down"
  35.         onClick={() => {}}
  36.         multipleLine
  37.       >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
  38.       <List.Item
  39.         extra={<div>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
  40.         arrow="up"
  41.         error
  42.         onClick={() => {}}
  43.         multipleLine
  44.       >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
  45.       <List.Item
  46.         extra="empty,有箭头坑位"
  47.         arrow="empty"
  48.         onClick={() => {}}
  49.         multipleLine
  50.       >内容内容</List.Item>
  51.       <List.Item
  52.         extra="校验报错"
  53.         error
  54.         onClick={() => {}}
  55.       >内容内容</List.Item>
  56.     </List>
  57.   </div>
  58. , mountNode);

对齐方式

双行列表 

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

业务示例

一个业务上使用的示例。 

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

List列表 - 图1

API

List

成员说明类型默认值
titlelist titleReactNode无
footerlist footerReactNode无

List.Item

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

List.Item.Brief

辅助说明