List 列表

规则

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

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

代码演示

示例

import { List } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
const ListExample = React.createClass({
  render() {
    return (<div>
      <List renderHeader={() => '左侧无icon'} className="my-list">
        <Item data-seed="logId">标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏</Item>
        <Item wrap>文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</Item>
        <Item extra="箭头向右" arrow="horizontal" onClick={() => {}}>标题文字</Item>
        <Item extra="箭头向下" arrow="down" onClick={() => {}}>标题文字</Item>
        <Item extra="箭头向上" arrow="up" onClick={() => {}}>标题文字</Item>
        <Item extra="内容内容" multipleLine align="top" wrap>
          多行标题文字，文字可能比较长、文字可能比较长、直接折行
        </Item>
        <Item extra="内容内容" multipleLine>
          垂直居中对齐 <Brief>辅助文字内容</Brief>
        </Item>
        <Item extra="没有箭头" arrow="empty" className="spe" wrap>
          极个别情况下，单行标题文字可能比较长，文字可能比较长、文字可能比较长、靠近右边会折行
        </Item>
        <Item>
          <select defaultValue="1">
            <option value="1">这是原生 html select</option>
            <option value="2" disabled>不可选</option>
            <option value="3">选项3</option>
          </select>
        </Item>
      </List>
      <div style={{ height: '0.16rem' }} />
      <List renderHeader={() => '左侧带图片'}>
        <Item
          thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
          arrow="horizontal"
          onClick={() => {}}
        >我的钱包</Item>
        <Item thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png">我的花销占比</Item>
      </List>
      <div style={{ height: '0.32rem' }} />
    </div>);
  },
});
ReactDOM.render(<ListExample />, mountNode);

.my-list .spe .am-list-extra {
  flex-basis: initial;
}

表单中的应用示例

import { List, InputItem, Switch, Stepper, Slider, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
const Item = List.Item;
let BasicInput = React.createClass({
  getInitialState() {
    return {
      value: 1,
    };
  },
  onSubmit() {
    this.props.form.validateFields({ force: true }, (error) => {
      if (!error) {
        console.log(this.props.form.getFieldsValue());
      } else {
        alert('校验失败');
      }
    });
  },
  onReset() {
    this.props.form.resetFields();
  },
  validateAccount(rule, value, callback) {
    if (value && value.length > 4) {
      callback();
    } else {
      callback(new Error('帐号至少4个字符'));
    }
  },
  render() {
    const { getFieldProps, getFieldError } = this.props.form;
    return (<form>
      <List renderHeader={() => '验证表单'}
        renderFooter={() => getFieldError('account') && getFieldError('account').join(',')}
      >
        <InputItem
          {...getFieldProps('account', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: true, message: '请输入帐号' },
              { validator: this.validateAccount },
            ],
          })}
          clear
          error={!!getFieldError('account')}
          onErrorClick={() => {
            alert(getFieldError('account').join('、'));
          }}
          placeholder="请输入账号"
        >帐号</InputItem>
        <InputItem {...getFieldProps('password')} placeholder="请输入密码" type="password">
          密码
        </InputItem>
        <Item
          extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />}
        >确认信息</Item>
        <Item><Slider range defaultValue={[20, 50]} /></Item>
        <Item extra={<Stepper style={{ width: '100%', minWidth: '2rem' }} showNumber size="small" defaultValue={20} />}>预定人数</Item>
      </List>
      <div style={{ margin: 12 }}>
        <Button type="primary" onClick={this.onSubmit} inline>提交验证</Button>
        <Button onClick={this.onReset} inline style={{ marginLeft: 5 }}>重置</Button>
      </div>
    </form>);
  },
});
BasicInput = createForm()(BasicInput);
ReactDOM.render(<BasicInput />, mountNode);

API ( 适用平台：WEB、React-Native )

List

List.Item

List.Item.Brief