TnSticky 吸顶组件

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

组件位置

nodeuni_modules

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，在H5，APP-VUE，NVUE，MP-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	是否开启粘性布局	Boolean	`true`	`false`
offset-top	粘性布局的距离顶部的距离，单位为`px`	Number	0	-
z-index	ZIndex	Number	10030	-

Emits

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

Slots

插槽名	说明
default	默认的内容

TnSticky 吸顶组件 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

API ​

Props ​

Emits ​

Slots ​