UI Views - List列表 - 《Ant Design Mobile v0.8.x 组件文档》 (2024)

Table of Contents
规则 代码演示 API List List.Item List.Item.Brief References
  • List 列表
    • 规则
  • 代码演示
  • API
    • List
    • List.Item
    • List.Item.Brief
    单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。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);

    UI Views - List列表 - 《Ant Design Mobile v0.8.x 组件文档》 (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

    辅助说明
    UI Views - List列表 - 《Ant Design Mobile v0.8.x 组件文档》 (2024)

    References

    Top Articles
    Eligibility & Requirements to Join
    Call Center Vocabulary Glossary | Global Response
    AJ Plug - Leef, lach en heb lief - De Blueskrant
    Jinnkid Wiki
    The Ultimate Guide To Twitter Analytics: Metrics, Tools & How To Get Started
    Twitter analytics: Insights that can make your campaigns more effective
    Sand Cat Motel
    Freightliner Fault Codes list (MID, PID, SID, FMI) | Truckmanualshub.com
    Hearst Castle Discount Tickets Aaa
    Boba Fett, blue fish, and fettuccine: How L.A. fentanyl sales boomed on Craigslist
    Latest Posts
    Frequently Asked Questions | Texas Commission on Law Enforcement
    About Our USO Centers
    Article information

    Author: Rev. Porsche Oberbrunner

    Last Updated:

    Views: 5596

    Rating: 4.2 / 5 (73 voted)

    Reviews: 80% of readers found this page helpful

    Author information

    Name: Rev. Porsche Oberbrunner

    Birthday: 1994-06-25

    Address: Suite 153 582 Lubowitz Walks, Port Alfredoborough, IN 72879-2838

    Phone: +128413562823324

    Job: IT Strategist

    Hobby: Video gaming, Basketball, Web surfing, Book restoration, Jogging, Shooting, Fishing

    Introduction: My name is Rev. Porsche Oberbrunner, I am a zany, graceful, talented, witty, determined, shiny, enchanting person who loves writing and wants to share my knowledge and understanding with you.