Skip to content

n-sticky 粘性布局 ​

滚过组件所在位置后吸附,向下回滚自动还原。默认只提供属性和插槽:Web、微信使用原生 sticky;App 在组件内部接入页面或指定容器的滚动事件。没有页面级测量、占位或偏移计算。

普通模式将 default 与 content 一起吸附。开启 bounded 后,仅 default 吸附,content 保持常流,在分组结束时推动标题让位;没有 content 时没有持续吸附的距离。修改 bounded 会重新装配插槽,滚动过程保留插槽实例。

平台兼容性 ​

最低 HBuilderX 5.26。实现覆盖 Android、iOS、鸿蒙、Web 和微信小程序。编译检查与交互验证分别记录,编译通过不代表对应真机验收完成。

Android iOS 鸿蒙 Web 微信小程序
事件定位 事件定位 事件定位 原生 sticky 原生 sticky

API ​

属性 ​

参数 说明 类型 默认值 可选值
scrollTop 可选显式滚动位置,px;null 自动定位,传数值时由该值驱动吸附,有限负数可表示回弹 Number / null null 有限数
scrollViewId 所在原生 scroll-view 的 ID;空为页面滚动,默认无需转发事件 String "" -
offsetTop 距页面或滚动容器顶部的吸附偏移,px,允许负数 Number 0 有限数
bounded 仅吸附 default,content 为范围正文;关闭时两插槽一起吸附,无正文时无持续吸附区间 Boolean false -
disabled 禁用吸附并保持文档流内容;重新启用自动测量 Boolean false -
zIndex -1 使用主题层级,非负整数显式覆盖 Number -1 -1 / 非负整数
headStyle default 内容层行内样式,支持背景、margin、padding 和高度 String "" -
customClass 根节点额外类,须在组件样式表内定义 String "" -
customStyle 根节点行内样式 String "" -

事件 ​

事件名 说明
change 检测到吸附状态变化时触发,参数 Boolean;同一状态不重复派发
error 配置或测量错误,参数 NStickyError:{prop: string, message: string};停止吸附并保留内容,修正后自动恢复

插槽 ​

插槽名 说明
default 吸附内容;提供 isSticky(Boolean)
content 普通模式随组件吸附,bounded 模式作为常流范围正文;提供 isSticky(Boolean)

方法 ​

方法名 说明
measure 请求重新测量;常规布局与尺寸变化由组件检测

样式令牌 ​

CSS 变量 默认值 作用
--n-sticky-z-index 900 吸附层级

实现说明 ​

能力 常见做法 本组件做法与取舍
自动吸附 原生 sticky,或事件驱动 fixed 与占位 Web / 微信自动滚动采用原生 sticky,App 采用事件定位;不通过定时查询补偿滚动位移
普通与范围模式 普通模式吸附外层,范围模式只吸附标题 两种模式的插槽含义全端一致,bounded 修改时重新装配,滚动时不重建插槽
显式滚动输入 scrollTop 驱动状态与定位 保留既有显式输入能力;传入数值时使用事件定位,不增加公开模式开关
几何与占位 首次测量标题,滚动时保留占位 常驻区间、标题、根节点与容器来自同批查询;事件定位按包含 margin 的完整标题壳占位,避免锚点漂移
局部滚动 原生 sticky,或原生 scroll 驱动位移 原生定位跟随滚动祖先;App 订阅指定容器,显式 scrollTop 可用于自有滚动来源
导航偏移 手动传入导航栏高度参与计算 Web 自动读取窗口顶偏移并入 offsetTop;App 页面内无内嵌导航栏,自定义导航场景由 offsetTop 直接表达
状态回报 显式滚动值或实际节点位置,或事件附带回执参数 事件定位即时计算状态;原生定位根据实际贴附位置回报 change / isSticky,检测结果不驱动视觉位置;事件直接绑定组件实例,不引入回执参数
样式与异常 节点样式定制、错误事件 保留主题令牌、根节点及标题内容层通道;非法参数、缺失节点和无效测量通过 error 回报并可恢复

几何与原生状态回报共享 100ms 检测时钟。原生吸附由平台逐帧完成,change 与 isSticky 为异步检测结果,不能用作逐帧滚动数据。显式 scrollTop 或 App 的滚动事件不逐次查询布局。隐藏、禁用、卸载时停止检测并注销监听,恢复后重新测量。

记录 · 思考 · 创作