Skip to content
12:13

TnSticky 吸顶组件

该组件与CSSposition: sticky属性实现的效果一致,当组件达到预设的到顶部距离时, 就会固定在指定位置,组件位置大于预设的顶部距离时,会重新按照正常的布局排列。

组件位置

typescript
import TnSticky from '@tuniao/tnui-vue3-uniapp/components/sticky/src/sticky.vue'
import TnSticky from '@tuniao/tnui-vue3-uniapp/components/sticky/src/sticky.vue'
typescript
import TnSticky from '@/uni_modules/tuniaoui-vue3/components/sticky/src/sticky.vue'
import TnSticky from '@/uni_modules/tuniaoui-vue3/components/sticky/src/sticky.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

说明

本组件内部通过多种手段嗅探当前运行环境是否支持css sticky,在H5APP-VUENVUEMP-WEIIXN安卓 等环境可以进行准确判断,如果支持则使用CSS方案,否则使用降级的JS方案。

由于css sticky的特殊性,建议您将此组件放置在页面外层元素中,否则可能会导致 sticky 失效,以下为MDN 官方对 Sticky的说明:

  • 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括 table-related 元素,基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

基础使用

  • 通过enabled设置为true开启吸顶,默认为开启状态
  • 通过offset-top设置吸顶的距离,单位为px
vue
<template>
  <view>
    <!-- 建议放的位置 -->
    <TnSticky> ... </TnSticky>
    <view class="inner">
      <!-- 不建议存放的位置 -->
      <TnSticky> ... </TnSticky>
    </view>
  </view>
</template>
<template>
  <view>
    <!-- 建议放的位置 -->
    <TnSticky> ... </TnSticky>
    <view class="inner">
      <!-- 不建议存放的位置 -->
      <TnSticky> ... </TnSticky>
    </view>
  </view>
</template>
vue
<template>
  <view>
    <!-- 建议放的位置 -->
    <TnSticky :offset-top="60"> ... </TnSticky>
  </view>
</template>
<template>
  <view>
    <!-- 建议放的位置 -->
    <TnSticky :offset-top="60"> ... </TnSticky>
  </view>
</template>

API

Props

属性名说明类型默认值可选值
enabled是否开启粘性布局Booleantruefalse
offset-top粘性布局的距离顶部的距离,单位为pxNumber0-
z-indexZIndexNumber10030-

Emits

事件名说明类型
change粘性布局状态变化时触发(fixed: boolean) => void

Slots

插槽名说明
default默认的内容

Tuniao UI