Sticky 吸顶

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

黏

import { DuSticky } from 'dangoui'

说明

在 uni-app 中，使用时，如果不使用 isSticky 变量，仍要给插槽加上 v-slot={}：<template v-slot={}>...</template>

示例

基本

右边示例窗口往下滑动试试

你可以利用 v-slot="{ isSticky }"，当元素固定的时候给特殊的样式

注意：固定状态和普通状态元素大小上不应该有区别，否则会出现布局上的问题

<template>
  <div class="h-200vh">
    <div class="bg-blue w-100px h-100px mb-8px rd-8px" />
    <DuSticky>
      <DuButton>距离顶部0px</DuButton>
    </DuSticky>
    <div class="bg-blue w-100px h-100px my-8px rd-8px" />
    <DuSticky :top="50">
      <DuButton>距离顶部50px</DuButton>
    </DuSticky>
    <div class="bg-blue w-100px h-100px my-8px rd-8px" />
    <DuSticky :top=200>
      <template v-slot="{ isSticky }">
        <div :class="['w-100px h-60px flex items-center justify-center c-white', isSticky ? 'bg-orange' : 'bg-green']">
          距离顶部 100px
        </div>
      </template>
    </DuSticky>
  </div>
</template>

<script setup lang="ts">
import { DuSticky, DuButton } from 'dangoui'
</script>

配合 NavigationBar

如果你的页面中有一个固定定位的 DuNavigationBar，top 值会加上这导航栏的高度

比如，当 top 为 0 的时候，会正好固定在导航栏下方，在实际应用中，这一般是符合预期的行为

<template>
  <DuNavigationBar fixed placeholder>标题</DuNavigationBar>
  <div class="h-200vh bg-white">
    <div class="bg-blue w-100px h-100px mb-8px rd-8px" />
    <DuSticky>
      <DuButton>距离顶部0px</DuButton>
    </DuSticky>
    <div class="bg-blue w-100px h-100px my-8px rd-8px" />
    <DuSticky :top="50">
      <DuButton>距离顶部50px</DuButton>
    </DuSticky>
  </div>
</template>

<script setup lang="ts">
import { DuNavigationBar, DuSticky, DuButton } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
top	`number`	`0`	距离上方多少距离开始吸顶
z	`number`	`99`	z-index
relative-to	`"viewport"`	`"viewport"`	目前只实现了 viewport

插槽

名称
default