Sticky 粘性布局

粘性布局组件，用于在页面滚动时将元素固定在指定位置。

基本用法

将需要吸顶的内容包裹在 wui-sticky 组件内即可。

注意：被包裹的元素在样式中使用百分比单位 width:xx%;height:xx%; 无效，建议使用 vh、vw。

<wui-sticky>
  <wui-button type="success">基础用法</wui-button>
</wui-sticky>

动态插入

wui-sticky 支持包裹动态生成的内容。

注意包裹动态生成的内容时，内容的宽高不小于 1px

<view style="margin-top: 20px;">
  <wui-button type="error" v-if="show">点击插入</wui-button>
  <wui-sticky>
    <wui-button type="success" v-if="show">动态插入</wui-button>
  </wui-sticky>
</view>

const show = ref<boolean>(false)

function display() {
  show.value = true
}

onShow(() => {
  setTimeout(display, 5000)
})

page {
  height: 200vh;
}

吸顶距离

通过 offset-top 属性可以设置组件在吸顶时与顶部的距离。

提醒

由于在H5端导航栏为普通元素，所以吸顶距离会自动在offset-top的基础上增加44px，当开发者在H5端使用自定义导航栏时offset-top就需要先减去44。例如期望吸顶距离为 20px，那么offset-top = 20 - 44 = -24

<wui-sticky :offset-top="50">
  <wui-button>吸顶距离</wui-button>
</wui-sticky>

指定容器

将 wui-sticky 组件包裹在自定义容器内，之后再使用 wui-sticky-box 包裹自定义容器。

注意：被包裹的自定义容器在样式中使用百分比单位 width:xx%;height:xx%; 无效，建议使用 vh、vw。

<wui-sticky-box>
  <view class="container">
    <wui-sticky>
      <wui-button type="warning">指定容器</wui-button>
    </wui-sticky>
  </view>
</wui-sticky-box>

.container {
  height: 150px;
  width: 100vw;
}

Sticky Attributes

参数	说明	类型	可选值	默认值	最低版本
z-index	堆叠顺序	number	-	1	-
offset-top	吸顶距离	number	-	0	-

Sticky 外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

Sticky Box 外部样式类

类名	说明	最低版本
custom-class	根节点样式	-

源代码

文档

• 组件