Tui Plus Vapor

Appearance

t-sticky ​

Sticky 吸顶

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <view class="sticky-demo">
    <t-scroll :scrollTop="scrollTop" @scroll="onScroll">
      <view class="content">
        <!-- 普通内容 -->
        <view class="banner">Banner 区域</view>
        
        <!-- 吸顶内容 -->
        <t-sticky :scrollTop="scrollTop" :zIndex="99">
          <view class="sticky-nav">
            <t-tabs v-model="activeTab">
              <t-tabs-item title="标签1"></t-tabs-item>
              <t-tabs-item title="标签2"></t-tabs-item>
              <t-tabs-item title="标签3"></t-tabs-item>
            </t-tabs>
          </view>
        </t-sticky>
        
        <!-- 长列表内容 -->
        <view class="list">
          <t-list-item v-for="i in 20" :key="i" title="列表项 {{i}}"></t-list-item>
        </view>
      </view>
    </t-scroll>
  </view>
</template>

<script setup>
const scrollTop = ref(0);
const activeTab = ref(0);

function onScroll(e) {
  scrollTop.value = e.detail.scrollTop;
}
</script>

<style scoped>
.sticky-demo {
  height: 100vh;
}
.banner {
  height: 300rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36rpx;
}
.sticky-nav {
  background: #fff;
}
</style>

Props ​

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

Events ​

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

Slots ​

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