List 列表

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

使用指南

在 Taro 文件中引入组件

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

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

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

一般用法

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

带描述信息

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

包含图片

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

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

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

带 Switch 的 Item

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

AtList 参数

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

AtListItem 参数

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

AtListItem 事件

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

List列表 - 图1