Sticky 粘性布局

介绍

当组件滚出屏幕范围时，固定在指定位置。

基础用法

将内容包裹在组件内，即可实现粘性布局。

<vd-sticky>
  <vd-button type="primary">基础用法</vd-button>
</vd-sticky>

吸顶距离

通过 top 属性来设置吸顶距离。

<vd-sticky :top="100">
  <vd-button type="primary">吸顶距离</vd-button>
</vd-sticky>

吸底距离

将 position 设置为 bottom 可以让组件吸附在底部。

<vd-sticky :bottom="100" position="bottom">
  <vd-button type="warning">吸底距离</vd-button>
</vd-sticky>

同时设置吸顶距离和吸底距离

通过 top 和 bottom 属性同时设置吸顶距离和吸底距离。

<vd-sticky :top="200" :bottom="50" :position="['top', 'bottom']">
  <vd-button type="primary">吸顶（200）、吸底（50）</vd-button>
</vd-sticky>

相对容器

通过 sticky-box 组件来设置相对容器。

<vd-sticky-box custom-class="sticky-container">
  <vd-sticky>
    <vd-button type="primary">相对容器</vd-button>
  </vd-sticky>
</vd-sticky-box>

import { randomId } from '@vital-design/shared';

const containerId = randomId();

.sticky-container {
  height: 200px;
  background: $vd-background;
  padding-left: 50%;
}

API

Props

参数	说明	类型	默认值
position	吸附位置，可选值 top bottom	stickyPosition | stickyPosition[]	top
top	吸附时，与顶部偏移距离	string | number | (string | number)[]	0
bottom	吸附时，与底部偏移距离	string | number | (string | number)[]	0
offset-navbar	偏移距离是否添加导航栏高度，页面有 Navbar 组件时会添加对应高度	boolean	true
offset-tabbar	偏移距离是否添加标签栏高度，页面有 Tabbar 组件时会添加对应高度	boolean	true
container	相对容器的节点匹配选择器	string	-
z-index	层级	string | number	99

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	尺寸改变时触发	NodeRect
change	吸顶/底改变时触发	stickyOnChangeEvent

Slots

名称	说明
default	自定义内容

Expose

方法名	说明	参数	返回值
update	手动更新吸附状态计算	-	-