List 列表

---

提供常见的 List 组件，帮助使用者快速搭建列表

使用指南

在 Taro 文件中引入组件

import { AtList, AtListItem } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import '~taro-ui/dist/style/components/list.scss';
@import '~taro-ui/dist/style/components/icon.scss';

一般用法

<AtList>
  <AtListItem title="标题文字" onClick="{this.handleClick}" />
  <AtListItem title="标题文字" arrow="right" />
  <AtListItem title="标题文字" extraText="详细信息" />
  <AtListItem title="禁用状态" disabled extraText="详细信息" />
</AtList>

带描述信息

<AtList>
  <AtListItem title="标题文字" note="描述信息" />
  <AtListItem title="标题文字" note="描述信息" arrow="right" />
  <AtListItem
    arrow="right"
    note="描述信息"
    title="标题文字标题文字标题文字标题文字标题文字"
    extraText="详细信息详细信息详细信息详细信息"
  />
</AtList>

包含图片

<AtList>
  <AtListItem
    title="标题文字"
    arrow="right"
    thumb="https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png"
  />
  <AtListItem
    title="标题文字"
    note="描述信息"
    arrow="right"
    thumb="http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png"
  />
  <AtListItem
    title="标题文字"
    note="描述信息"
    extraText="详细信息"
    arrow="right"
    thumb="http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png"
  />
</AtList>

支持图标的 Item

<AtList>
  <AtListItem title='标题文字' note='描述信息' arrow='right' iconInfo={{ size:
  25, color: '#78A4FA', value: 'calendar', }} /> <AtListItem title='标题文字'
  note='描述信息' extraText='详细信息' arrow='right' iconInfo={{ size: 25,
  color: '#FF4949', value: 'bookmark', }} />
</AtList>

支持图标的 Item

<AtList>
  <AtListItem
    title='标题文字'
    note='描述信息'
    arrow='right'
    iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
    thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
    icon={<View className='at-icon at-icon-bookmark' />}
  />
</AtList>

::: caution

当 icon、thumb、iconInfo 属性同时存在时，优先级为 icon > iconInfo > thumb

无边框的 Item

<AtList hasBorder="{false}">
  <AtListItem
    isSwitch
    title="标题文字"
    hasBorder="{false}"
    onSwitchChange="{this.handleChange}"
  />
  <AtListItem
    isSwitch
    title="标题文字"
    hasBorder="{false}"
    onSwitchChange="{this.handleChange}"
  />
</AtList>

带 Switch 的 Item

<AtList>
  <AtListItem title="标题文字" isSwitch onSwitchChange="{this.handleChange}" />
</AtList>

AtList 参数

参数	说明	类型	可选值	默认值
hasBorder	是否有边框	Boolean	-	true

AtListItem 参数

参数	说明	类型	可选值	默认值
title	元素的标题	JSX.Element 、String	-	-
disabled	是否禁用	Boolean	-	false
note	元素的描述信息	JSX.Element 、String	-	-
thumb	元素的主要缩略图	String	-	-
arrow	箭头的方向	String	right,top,down	-
extraText	额外信息的文本	JSX.Element 、String	-	-
extraThumb	额外信息的缩略图	String	-	-
isSwitch	额外信息是否开关	Boolean	-	false
switchColor	开关的颜色	String	-	#6190E8
switchIsCheck	额外信息开关的值	Boolean	-	false
hasBorder	是否有边框	Boolean	-	true
iconInfo	icon 信息	{'{ value , size? , color?, prefixClass?,className?,customStyle? }'}	-	true
icon	icon 的内容	JSX.Element	-	-

AtListItem 事件

事件名称	说明	返回参数
onClick	用户点击元素触发的事件	-
onSwitchChange	用户点击切换 Switch 时触发	-