List (长列表)

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

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page :scroll-disabled="true" main-class="p-30">
		<t-card main-class='mb-30' title="List 滚动视图"
			sub-title="对官方list-view组件的增强，增加自定义下拉刷新和上拉加载，增加WEB端和IOS端支持【scrollend】事件"></t-card>
		<t-list type="p" main-class="f" ref="ins" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh"
			@scrollend="scrollend">
			<t-list-item v-for='(item,index) in componentList' :key="index">
				<t-row main-class='p-30 mb-30 tdb tdr fjcb'>
					<t-text>{{item['tag']}}</t-text>
					<t-text>{{item['name']}}</t-text>
					<t-icon :name="item['icon']" :stop="true"></t-icon>
					<t-icon name="thumb-up" :stop="true"></t-icon>
					<t-icon name="edit-pen" :stop="true"></t-icon>
					<t-icon name="star" :stop="true"></t-icon>
					<t-icon name="trash" :stop="true"></t-icon>
				</t-row>
			</t-list-item>
			<!-- <template #loadmore>
				<text>加载更多</text>
			</template>
			<template #refresher>
				<text>自定义下拉刷新</text>
			</template> -->
		</t-list>
	</t-page>
</template>

<script setup>
	import { TuiApi } from '@/api'
	import { TuiSleep } from '@/uni_modules/tui-plugins'
	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('getComponent', {
				"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>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
loadmore	Boolean	true	是否显示加载更多
refresherBoxClass	String	``	下拉刷新盒子的样式
bounces	Boolean	true	控制是否回弹效果 优先级高于rebound
scrollTop	Number	1	设置竖向滚动条位置
scrollWithAnimation	Boolean	true	是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画
showScrollbar	Boolean	false	控制是否出现滚动条
backtop	Boolean	false	是否显示返回顶部
loadmoreBoxClass	String	``	加载更多盒子的样式
direction	String	vertical	滚动方向紧支持纵向
associativeContainer	String	nested-scroll-view	关联的滚动容器	nested-scroll-view: 嵌套滚动
lowerThreshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scrollIntoView	String	``	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素起始位置
refresherThreshold	Number	100	设置下拉刷新阈值, 仅 refresher-default-style = 'none' 自定义样式下生效
customNestedScroll	Boolean	false	子元素是否开启嵌套滚动 将滚动事件与父元素协商处理
refresherEnabled	Boolean	true	是否禁用下拉刷新
refresherBackground	String	transparent	设置下拉刷新区域背景颜色，默认透明
maskClass	String	``
upperThreshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
scrollLeft	Number	1	设置横向滚动条位置

事件

名称	返回参数	说明
refresherpulling	(event: UniRefresherEvent) => void	下拉刷新控件被下拉
scrolltolower	(event: UniScrollToLowerEvent) => void	滚动到底部/右边，会触发 scrolltolower 事件
refresherabort	(event: UniRefresherEvent) => void	下拉刷新被中止
refresherrefresh	(event: UniRefresherEvent) => void	下拉刷新被触发
scrollend	(event: UniScrollEvent) => void	滚动结束时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
refresherrestore	(event: UniRefresherEvent) => void	下拉刷新被复位
scrolltoupper	(event: UniScrollToUpperEvent) => void	滚动到顶部/左边，会触发 scrolltoupper 事件
scroll	(event: UniScrollEvent) => void	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

插槽

名称	返回值	说明
default	-
name	-