# t-scroll

Scroll 滚动

t-scroll 组件介绍

滚动组件，scroll-view组件的增强版，增加自定义下拉刷新和上拉加载，WEB端支持【scrollend】事件。

t-scroll 平台兼容

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

t-scroll 基础用法

<template>
	<view :class="[`p-15 f tpg`]">
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title="Scroll 滚动视图"
				sub-title="对官方scroll组件的增强，增加自定义下拉刷新和上拉加载，增加WEB端支持【scrollend】事件"></t-card>
		<t-scroll type="primary"
				  class="f"
				  ref="ins"
				  @scrolltolower="scrolltolower"
				  @refresherrefresh="refresherrefresh"
				  :refresher-enabled="true"
				  :loadmore="true"
				  @scrollend="scrollend">
			<view v-for='(item,index) in componentList'
				  :key="index">
				<view :class="[`fl p-15 mb-15 tvg trm fjcb`]">
					<t-text>{{item['name']}}</t-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>
				</view>
			</view>
		</t-scroll>
	</view>
</template>

<script setup>
	import { TuiApi } from '@/api'
	import { TuiSleep } from '@/uni_modules/tui-common'
	const ins = ref<TScrollComponentPublicInstance | 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-scroll Props

属性名	类型	默认值	说明	可选值
size	String	"large"	组件尺寸	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
maskClass	String	""	遮罩层样式	-
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
refresherBackground	String	"transparent"	设置下拉刷新区域背景颜色	-
refresherTriggered	Boolean	false	设置下拉刷新是否触发	true, false

t-scroll 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	无
closerefresher	关闭下拉刷新	无	无

t-scroll Slots

插槽名	说明
default	内容插槽，用于放置可滚动的内容
loadmore	加载更多插槽，用于自定义加载更多内容
refresher	下拉刷新插槽，用于自定义下拉刷新内容
mask	遮罩层插槽，用于自定义遮罩层内容