TMUI 3.1.05
Search K

Appearance

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贡献，如果对该框架感兴趣的可以参与我们一同进步！