qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

List 列表


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

使用指南

在 Taro 文件中引入组件

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

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/list.scss";

一般用法

<AtList>
  <AtListItem title='标题文字' @click="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 :hasBorder="false">
  <AtListItem
    isSwitch
    title='标题文字'
    :hasBorder="false"
    @switch-change="handleChange"
  />
  <AtListItem
    isSwitch
    title='标题文字'
    :hasBorder="false"
    @switch-change="handleChange"
  />
</AtList>

带 Switch 的 Item

<AtList>
  <AtListItem
    title='标题文字'
    isSwitch
    @switch-change="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 时触发-