• List 列表
    • 使用指南
    • 一般用法
    • 带描述信息
    • 包含图片
    • 无边框的 Item
    • 带 Switch 的 Item
    • AtListItem 参数
    • AtListItem 参数

    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 - -