Sticky 吸顶

吸顶组件,用于滚动时固定内容到顶部

吸顶距离

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-sticky class="demo-sticky-default" ref="stickyRef1" :offsetTop="0"> <view class="sticky-content"> <text class="sticky-content-text">吸顶内容 - 基础用法</text> </view> </re-sticky>

<!-- 偏移距离 -->
  <re-sticky class="demo-sticky-offset" ref="stickyRef2" :offsetTop="50"> <view class="sticky-content sticky-content--blue"> <text class="sticky-content-text">偏移50px吸顶</text> </view> </re-sticky>

<!-- 带导航栏 -->
  <re-sticky class="demo-sticky-nav" ref="stickyRef3" :offsetTop="0"> <view class="sticky-nav"> <text class="sticky-nav-text">导航栏吸顶</text> <text class="sticky-nav-text">首页</text> <text class="sticky-nav-text">分类</text> <text class="sticky-nav-text">我的</text> </view> </re-sticky>

<!-- z-index -->
  <re-sticky class="demo-sticky-zindex" ref="stickyRef4" :zIndex="100" :offsetTop="0"> <view class="sticky-content sticky-content--green"> <text class="sticky-content-text">z-index 100</text> </view> </re-sticky>

<!-- 禁用吸顶 -->
  <re-sticky class="demo-sticky-disabled" :disabled="true"> <view class="sticky-content sticky-content--gray"> <text class="sticky-content-text">禁用吸顶 - 不会固定</text> </view> </re-sticky>

<!-- 大偏移量 -->
  <re-sticky class="demo-sticky-large-offset" ref="stickyRef5" :offsetTop="100"> <view class="sticky-content sticky-content--orange"> <text class="sticky-content-text">偏移100px吸顶</text> </view> </re-sticky>

<!-- 自定义样式 -->
  <re-sticky class="demo-sticky-custom-style" ref="stickyRef6" customStyle="margin-top: 10px;"> <view class="sticky-content sticky-content--purple"> <text class="sticky-content-text">自定义样式吸顶</text> </view> </re-sticky>

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-sticky />。

API

Sticky Props

名称类型默认值描述必传
offsetTopnumber0-Y
disabledbooleanfalse是否禁用Y
zIndexnumber99层级Y
containerstring''-Y
customStylestring''自定义样式Y

Sticky Events

名称参数描述
---

Sticky Slots

名称描述
default默认插槽