# t-list

List 列表

t-list 组件介绍

长列表组件，list-view组件的增强版，增加自定义下拉刷新和上拉加载，增加WEB端和IOS端支持【scrollend】事件。

t-list 平台兼容

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

t-list 基础用法

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

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
loadmore	Boolean	true	是否显示加载更多	true, false
refresherEnabled	Boolean	true	是否禁用下拉刷新	true, false
loadmoreBoxClass	String	""	加载更多盒子的样式	-
refresherBoxClass	String	""	下拉刷新盒子的样式	-
direction	String	"vertical"	滚动方向	vertical
associativeContainer	String	""	关联的滚动容器	nested-scroll-view
bounces	Boolean	true	控制是否回弹效果	true, false
upperThreshold	Number	50	距顶部多远时触发scrolltoupper事件	-
lowerThreshold	Number	50	距底部多远时触发scrolltolower事件	-
scrollTop	Number	0	设置竖向滚动条位置	-
scrollLeft	Number	0	设置横向滚动条位置	-
scrollIntoView	String	""	值应为某子元素id	-
scrollWithAnimation	Boolean	false	是否使用滚动动画	true, false
refresherThreshold	Number	100	设置下拉刷新阈值	-
showScrollbar	Boolean	false	控制是否出现滚动条	true, false
customNestedScroll	Boolean	false	子元素是否开启嵌套滚动	true, false
backtop	Boolean	false	是否显示返回顶部	true, false
refresherBackground	String	"transparent"	设置下拉刷新区域背景颜色	-
maskClass	String	""	遮罩层样式	-

t-list Events

事件名	说明	回调参数
refresherpulling	下拉刷新控件被下拉	RefresherEvent
refresherrefresh	下拉刷新被触发	RefresherEvent
refresherrestore	下拉刷新被复位	RefresherEvent
refresherabort	下拉刷新被中止	RefresherEvent
scrolltoupper	滚动到顶部/左边	ScrollEvent
scrolltolower	滚动到底部/右边	ScrollEvent
scroll	滚动时触发	ScrollEvent
scrollend	滚动结束时触发	ScrollEvent
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象

Methods

方法名	说明	参数	返回值
setLoadmore	设置加载更多状态	status: number	无
showMask	显示遮罩层	无	无
hideMask	隐藏遮罩层	无	无
closerefresher	关闭下拉刷新	无	无

t-list Slots

插槽名	说明
default	内容插槽，用于放置t-list-item子组件
loadmore	加载更多插槽，用于自定义加载更多内容
refresher	下拉刷新插槽，用于自定义下拉刷新内容
mask	遮罩层插槽，用于自定义遮罩层内容