xtf-sticky

组件说明

xtf-sticky 是内容吸顶容器，适用于筛选栏、操作栏和标签栏。支持视口固定与 CSS sticky 容器模式，并回传滚动测量和固定状态。

基础用法

1. 视口吸顶

<template>
  <view>
    <xtf-sticky>
      <view style="padding: 24rpx; background: #fff"> <xtf-text text="商品分类" /></view>
</xtf-sticky>
    <view style="height: 1600rpx"
  /></view>
</template>
<script>
export default {}
</script>

2. 偏移和状态事件

<template>
  <xtf-sticky :offset-top="88" @change="changed" @scroll="scrolled">
    <xtf-tabs :items="tabs"
  /></xtf-sticky>
</template>
<script>
export default {
  data() {
    return { tabs: [{ label: '全部' }, { label: '待付款' }] }
  },
  methods: {
    changed(data) {
      uni.showToast({ title: data.fixed ? '已吸顶' : '已复位', icon: 'none' })
    },
    scrolled(data) {
      console.log(data.top, data.offsetTop)
    }
  }
}
</script>

3. 容器模式

<template>
  <scroll-view scroll-y style="height: 600rpx">
    <view style="height: 300rpx" /><xtf-sticky mode="container" :offset-top="20" :z-index="6"
      ><xtf-button label="容器内吸顶操作栏"
    /></xtf-sticky>
    <view style="height: 900rpx"
  /></scroll-view>
</template>
<script>
export default {}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | offsetTop | Number \| String | 0 | 吸顶偏移，数字按 rpx 处理 | 顶部导航避让 | | zIndex | Number | 99 | 固定层级 | 覆盖内容 | | disabled | Boolean | false | 关闭吸顶监听 | 条件禁用 | | mode | String | 'viewport' | viewport 固定或 container 原生 sticky | 滚动容器选择 | | container | Boolean \| String | false | mode 非法时兼容决定容器模式 | 兼容配置 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

事件

事件名称	触发时机	回调参数	参数说明
scroll	每次测量位置	({ top, fixed, offsetTop })	锚点位置、固定状态、rpx 偏移
change	固定状态变化	({ fixed })	是否已固定

---

插槽

插槽名	作用	作用域参数	说明
default	吸顶内容	无	组件固定或容器吸顶时整体保留该内容

完整插槽示例：

<template>
  <view>
    <xtf-sticky :offset-top="88" @change="changed">
      <view style="padding: 24rpx; background: #fff"><xtf-tabs :items="tabs" /></view>
</xtf-sticky>
    <view style="height: 1600rpx"
  /></view>
</template>
<script>
export default {
  data() {
    return { tabs: [{ label: '全部' }, { label: '待付款' }] }
  },
  methods: {
    changed(data) {
      console.log(data.fixed)
    }
  }
}
</script>

主题说明

• 容器模式使用 --xtf-sticky-offset、--xtf-sticky-z-index。
• 视口固定内容继承背景并使用轻量阴影。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。