Skip to content
On this page

组件库文档 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="font-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-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
modelStringtop可选:left,top
offsetString,Number0距离顶部间隙,单位px
zIndexNumber50层级,对于nvue无效

🌹 事件

🌽 slot插槽

默认default:为显示的默认内容。 插槽:sticky,用于悬浮。

vue
<template v-slot:sticky>
<view>
这里面是悬浮的内容
</view>
</template>

💏 文档贡献

此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!