引入组件

局部引入

// parent.vue
const FSticky = defineAsyncComponent(() => import('@/components/formaui/f-sticky/f-sticky.vue'))

基础用法

设置滚动条距离顶部距离scrollTop（通过onPageScroll生命周期函数获取），吸顶容器高度stickyHeight。

<f-sticky :scrollTop="scrollTop" :stickyTop="0" stickyHeight="80rpx">
  <template #header>
    <view class="h-[80rpx] text-center leading-[80rpx]">基本用法</view>
  </template>
</f-sticky>

import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
const scrollTop = ref<number>(0)
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})

吸顶距离

通过stickyTop属性设置吸顶时与顶部的距离。

<f-sticky :scrollTop="scrollTop" :stickyTop="stickyTop" stickyHeight="80rpx">
  <template #header>
    <view class="h-[80rpx] text-center leading-[80rpx]">吸顶距离</view>
  </template>
</f-sticky>

import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
const scrollTop = ref<number>(0)
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
const stickyTop = ref<number>(uni.upx2px(120))

指定容器

设置container为true，内容放置插槽content内，页面滚动时，组件会始终保持在容器范围内。

<f-sticky :scrollTop="scrollTop" stickyHeight="80rpx" container>
  <template #header>
    <view class="h-[80rpx] text-center leading-[80rpx]">指定容器</view>
  </template>
  <template #content>
    <view class="h-[300rpx] border border-solid border-[#ddd]">容器内容</view>
  </template>
</f-sticky>

import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
const scrollTop = ref<number>(0)
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})

插槽

名称	说明
header	吸顶容器内显示内容
content	当吸顶容器设置为指定容器时，内容放置此插槽内

属性

名称	类型	说明	默认值
scrollTop	number	滚动条距离顶部距离	-
stickyTop	number	吸顶时与顶部的距离，单位 px	H5:44，其他:0
container	boolean	是否指定容器，即内容放置插槽 content 内	false
isNativeHeader	boolean	是否是原生自带 header	false
stickyHeight	string	吸顶容器高度，单位 rpx	auto
bgColor	string	占位容器背景颜色	transparent
recalc	number	是否重新计算[有异步加载时使用,设置大于 0 的数]	0

事件

事件名	说明	回调参数
sticky	是否已经吸顶	{ isFixed: boolean }
change	元吸顶容器距顶部距离发生变化时触发	{ top: number }