粘性布局 Sticky

Sticky 组件与 CSS 中position: sticky属性实现的效果一致。可切换css模式和js模式，纯css模式不适用的情况可以采用js模式，js模式采用IntersectionObserver Api

使用

API

安装使用

import { TiSticky } from '@titian-design/mobile-vue'

用法示例

基础用法

基础吸顶

codesanbox

copy

code

<template>
  <div class="sticky-container">
    <div style="height: 3000px; display: flex; align-items: center; flex-direction: column">
      <div style="height: 40px" />
      <TiSticky>
        <TiButton>基础吸顶</TiButton>
      </TiSticky>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TiSticky, TiButton } from 'titian-h5-vue';
</script>

吸顶距离

基础吸顶

codesanbox

copy

code

<template>
  <div class="sticky-container">
    <div style="height: 3000px; display: flex; align-items: center; flex-direction: column">
      <div style="height: 40px" />
      <TiSticky :offsetTop="20">
        <TiButton>基础吸顶</TiButton>
      </TiSticky>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TiSticky, TiButton } from 'titian-h5-vue';
</script>

指定容器

基础吸顶

codesanbox

copy

code

<template>
  <div class="sticky-container">
    <div ref="container" style="height: 3000px; display: flex; align-items: center; flex-direction: column">
      <div style="height: 40px" />
      <TiSticky @container="getContainer">
        <TiButton>基础吸顶</TiButton>
      </TiSticky>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiSticky, TiButton } from 'titian-h5-vue';

const container = ref<HTMLDivElement>();

const getContainer = () => {
  return container.value;
};
</script>

TiSticky API

属性 Properties

名称	类型	必填	默认值	说明	备注
offset-top	number	否	0	吸顶时与顶部的距离，单位 px	-
container	function	否	-	一个函数，返回容器对应的 NodesRef 节点	-
disabled	boolean	否	false	是否禁止吸顶	-
z-index	number	否	99	z-index	-
use-pure-css	boolean	否	false	使用css的position: sticky实现	-

事件 Events

名称	参数列表	描述	备注
fixed	(e: CustomEvent<{isFixed: boolean}>) => void	在吸顶状态改变是触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-