# t-sticky

Sticky 吸顶

t-sticky 组件介绍

t-sticky 用于创建在页面滚动时可以固定在顶部的内容块。支持配置吸顶位置、层叠顺序，适用于导航栏、筛选条件等需要始终可见的元素。

t-sticky 平台兼容

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

t-sticky 基础用法

基础用法参考 demo/sticky/sticky.uvue，将需要吸顶的内容包裹在 t-sticky 组件内。

<template>
	<t-page class="p-15"  @scroll="onscroll">
		<t-card class="mb-15"
				title='Sticky粘性布局'
				sub-title="Sticky粘性布局，用于实现元素在页面滚动时固定在指定位置，支持自定义z-index和top值，简单易用。"></t-card>
		<t-sticky :scrollTop="scrollTop"
				  :stickyTop="0">
			<t-button type="primary">欢迎使用Tui</t-button>
		</t-sticky>
		<view v-for="i in 3"
			  :key="i"
			  class="h-250 r-10 mb-15"></view>
		<t-sticky class="mb-15"
				  :stickyTop="50"
				  :scrollTop="scrollTop">
			<t-button type="primary">Tui是一个强大的UI库，提供了丰富的组件和灵活的配置。</t-button>
		</t-sticky>
		<view v-for="i in 5"
			  :key="i"
			  class="h-250 r-10 mb-15"></view>
		<t-sticky class="mb-15"
				  :stickyTop="120"
				  :scrollTop="scrollTop">
			<t-button type="primary">快速导航：首页 | 优惠券 | 会员中心 | 客服支持</t-button>
		</t-sticky>
		<view v-for="i in 5"
			  :key="i"
			  class="h-400 r-10 mb-15"></view>
	</t-page>
</template>
<script setup>
	import { TuiGuid } from '@/uni_modules/tui-common';
	const scrollTop = ref<number>(0)
	function onscroll(e : ScrollEvent) {
		scrollTop.value = e.detail.scrollTop
	}
	// onPageScroll((e : OnPageScrollOptions) => {
	// 	console.log(onPageScroll)
	// 	scrollTop.value = e.scrollTop
	// })
	const guid = ref(TuiGuid(20))
</script>

t-sticky Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	''
insId	吸顶元素的ID	string	''
zIndex	层叠顺序	number	88
stickyTop	吸顶位置距离顶部的距离（单位 px）	number	0
scrollTop	滚动组件的 scrollTop 值	number	0

t-sticky Events

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

t-sticky Slots

插槽名	说明
default	需要吸顶的内容