组件库文档 tmui.design
吸顶 Sticky
吸顶组件，用于将元素固定在顶部不随页面滚动。
🌶️ 吸顶 Sticky 示例
查看模拟效果＋
示例模板
vue
<template>
<tm-app>
<tm-sticky :offset="offset">
<template v-slot:sticky>
<tm-sheet color="primary" :margin="[0, 0]">
<tm-text :font-size="24" _class="text-weight-b" label="滑动页面我被悬浮了"></tm-text>
</tm-sheet>
</template>
<tm-sheet :height="2000"> </tm-sheet>
</tm-sticky>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmSticky from '@/tmui/components/tm-sticky/tm-sticky.vue'
const offset = ref(0)
// #ifdef H5
offset.value = uni.$tm.u.torpx(44)
// #endif
</script>🌶️ 兼容性
| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| model | String | top | 可选：left,top |
| offset | String,Number | 0 | 距离顶部间隙，单位px |
| zIndex | Number | 50 | 层级，对于nvue无效 |
🌹 事件
无
🌽 slot插槽
默认default：为显示的默认内容。 插槽：sticky，用于悬浮。
vue
<template v-slot:sticky>
<view>
这里面是悬浮的内容
</view>
</template>💏 文档贡献
此页文档由Kyour贡献，如果对该框架感兴趣的可以参与我们一同进步！