t-list-item

ListItem 列表项

组件介绍

长列表子组件，list-view组件的唯一合法子组件。每个item是一行兼容性。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <t-list>
    <t-list-item v-for="(item, index) in listData" :key="index" @click="handleClick(item)">
      <t-cell :title="item.title" :value="item.value"></t-cell>
    </t-list-item>
  </t-list>
</template>

<script setup>
const listData = ref([
  { title: 'Item 1', value: 'Value 1' },
  { title: 'Item 2', value: 'Value 2' },
  { title: 'Item 3', value: 'Value 3' },
]);

function handleClick(item) {
  console.log('点击了:', item);
}
</script>

Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain

Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent

Slots

插槽名	说明
default	内容插槽，用于放置列表项的内容