TnSticky 吸顶组件
该组件与CSS
中position: 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
,在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 | 默认的内容 |