<!-- 基础用法 -->
<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>