Skip to content

Sticky 吸顶容器 ​

滚动页面时将指定内容固定在顶部,也可限制在指定内容范围内。

支持平台 ​

以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。

App-vueApp-nvue微信小程序支付宝小程序百度小程序字节小程序QQ小程序H5PC快手小程序钉钉小程序
✓✓✓✓✓✓✓✓✓✓✓

基础用法 ​

vue
<!-- 滚动时保持在顶部的内容 -->
<fui-sticky :top="0">
  <view>吸顶内容</view>
</fui-sticky>

属性 ​

属性类型说明官网默认值
topNumber / String吸顶后距顶部距离,单位 px0
rangeBoolean是否仅在 content 插槽的内容范围内吸顶false
scrollTopNumber页面垂直滚动距离,单位 px,由页面滚动事件提供0
zIndexNumber / String吸顶元素层级,nvue 不支持999
widthNumber / String宽度,单位 rpx,仅 nvue 支持750
paramNumber / String事件携带的自定义参数0

事件 ​

事件说明回调参数
sticky传入 scrollTop 时,吸顶状态变化触发{ isFixed, param }

插槽 ​

插槽说明
default需要吸顶的内容
contentrange 为 true 时限制吸顶范围的内容

平台说明 ​

百度、QQ、字节小程序在 range 为 false 时需要传入 scrollTop;nvue 页面可使用原生 list 等组件处理滚动,元素顺序影响层级。