List 列表

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

使用指南

在 Taro 文件中引入组件

:::demo

  1. import { AtList, AtListItem } from "taro-ui"

:::

一般用法

:::demo

  1. <AtList>
  2.   <AtListItem title='标题文字' onClick={this.handleClick} />
  3.   <AtListItem title='标题文字' arrow='right' />
  4.   <AtListItem title='标题文字' extraText='详细信息' />
  5. </AtList>

:::

带描述信息

:::demo

  1. <AtList>
  2.   <AtListItem title='标题文字' note='描述信息' />
  3.   <AtListItem title='标题文字' note='描述信息' arrow='right' />
  4.   <AtListItem
  5.     arrow='right'
  6.     note='描述信息'
  7.     title='标题文字标题文字标题文字标题文字标题文字'
  8.     extraText='详细信息详细信息详细信息详细信息'
  9.   />
  10. </AtList>

:::

包含图片

:::demo

  1. <AtList>
  2.   <AtListItem
  3.     title='标题文字'
  4.     arrow='right'
  5.     thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
  6.   />
  7.   <AtListItem
  8.     title='标题文字'
  9.     note='描述信息'
  10.     arrow='right'
  11.     thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
  12.   />
  13.   <AtListItem
  14.     title='标题文字'
  15.     note='描述信息'
  16.     extraText='详细信息'
  17.     arrow='right'
  18.     thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
  19.   />
  20. </AtList>

:::

无边框的 Item

:::demo

  1.  <AtList hasBorder={false}>
  2.   <AtListItem
  3.     isSwitch
  4.     title='标题文字'
  5.     hasBorder={false}
  6.     onSwitchChange={this.handleChange}
  7.   />
  8.   <AtListItem
  9.     isSwitch
  10.     title='标题文字'
  11.     hasBorder={false}
  12.     onSwitchChange={this.handleChange}
  13.   />
  14. </AtList>

:::

带 Switch 的 Item

:::demo

  1. <AtList>
  2.   <AtListItem
  3.     title='标题文字'
  4.     isSwitch
  5.     onSwitchChange={this.handleChange}
  6.   />
  7. </AtList>

:::

AtListItem 参数

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

AtListItem 参数

参数 说明 类型 可选值 默认值
title 元素的标题 String - -
note 元素的描述信息 String - -
thumb 元素的主要缩略图 String - -
arrow 箭头的方向 String right,top,bottom -
extraText 额外信息的文本 String - -
extraThumb 额外信息的缩略图 String - -
isSwitch 额外信息是否开关 Boolean - false
hasBorder 是否有边框 Boolean - true
onClick 用户点击元素触发的事件 Function - -
onSwitchChange 用户点击切换 Switch 时触发 Function - -