# t-list-item

ListItem 列表项

t-list-item 组件介绍

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

t-list-item 平台兼容

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

t-list-item 基础用法

<template>
	<view :class="[`p-15 f tpg`]">
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title="List 滚动视图"
				sub-title="对官方list-view组件的增强，增加自定义下拉刷新和上拉加载，增加WEB端和IOS端支持【scrollend】事件"></t-card>
		<t-list type="primary"
				class="f"
				ref="ins"
				@scrolltolower="scrolltolower"
				@refresherrefresh="refresherrefresh"
				@scrollend="scrollend">
			<t-list-item v-for='(item,index) in componentList'
						 :key="index">
				<t-row :class="`p-15 mb-15 tvg trm fjcb`">
					<text :class="[`ttc-`]">{{item['name']}}</text>
					<t-icon name="thumb-up"></t-icon>
					<t-icon name="edit-pen"></t-icon>
					<t-icon name="star"></t-icon>
					<t-icon name="trash"></t-icon>
				</t-row>
			</t-list-item>
		</t-list>
	</view>
</template>

<script setup>
	import { TuiApi } from '@/api'
	import { TuiSleep } from '@/uni_modules/tui-common'
	const ins = ref<TListComponentPublicInstance | null>(null)
	const mask = ref(true)
	const cur = ref(1)
	const total = ref(0)
	const pageSize = ref(20)
	const list = ref<UTSJSONObject[]>([])
	const componentList = ref<UTSJSONObject[]>([])
	const sleep = new TuiSleep(1000)
	let loading : boolean = false
	function getComponentList() : Promise<UTSJSONObject[]> {
		return new Promise((
			resolve : (rst : UTSJSONObject[]) => void
		) => {
			if (loading) return
			loading = true
			TuiApi('getComponentTest', {
				"current": cur.value,
				"pageSize": pageSize.value,
				"keyword": '',
				"type": 'all',
				devstatus: 'completed'
			}, true).then((res : UTSJSONObject) => {
				const lastPage = (res as UTSJSONObject).getBoolean('data.lastPage')!
				sleep.call(() => {
					cur.value++
					loading = false
					if (lastPage) {
						ins.value!.setLoadmore(3)
					} else {
						//设置状态为0会销毁组件，避免loading会在后台运行
						ins.value!.setLoadmore(0)
					}
					nextTick(() => {
						resolve((res as UTSJSONObject).getArray('data.list') as UTSJSONObject[])
					})
				})
			})
		})
	}
	function scrollend(e : UniScrollEvent) {
		console.log(e)
	}
	function refresherrefresh() {
		loading = false
		cur.value = 1
		getComponentList().then((data : UTSJSONObject[]) => {
			componentList.value = data
			ins.value!.closerefresher()
		})
	}
	function scrolltolower() {
		getComponentList().then((data : UTSJSONObject[]) => {
			componentList.value.push(...data)
		})
	}
	onUnload(() => {
		sleep.clear()
	})
	onLoad(() => {
		getComponentList().then((data : UTSJSONObject[]) => {
			ins.value!.hideMask()
			componentList.value = data
		})
	})
</script>

t-list-item 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

t-list-item Events

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

t-list-item Slots

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