更新记录

0.0.2（2025-10-15）

-feat : uniappx app增加 scrollTop参数

0.0.1（2025-08-23）

• init

平台兼容性

uni-app(4.65)

uni-app x(4.76)

lime-sticky 粘性布局组件

粘性布局组件，实现元素在页面滚动过程中的吸顶或吸底效果。当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部或底部。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 粘性布局组件文档 - 站点1
• 粘性布局组件文档 - 站点2
• 粘性布局组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-sticky
2. 导入后可能需要重新编译项目
3. 在页面中使用l-sticky组件

代码演示

基础用法

将内容包裹在 l-sticky 组件内即可实现吸顶效果。

<l-sticky>
  <button>基础吸顶</button>
</l-sticky>

吸顶距离

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

<l-sticky :offset-top="40">
  <button>吸顶距离</button>
</l-sticky>

容器中吸顶

将 l-sticky 组件放在 l-sticky-box 容器内，可以实现在容器内的吸顶效果。

<l-sticky-box style="height: 300px; background-color: #f5f5f5;">
  <l-sticky>
    <button>容器中吸顶</button>
  </l-sticky>
</l-sticky-box>

吸底距离

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

<l-sticky :offset-bottom="44">
  <button>吸底距离</button>
</l-sticky>

容器中吸底

将 l-sticky 组件放在 l-sticky-box 容器内，并设置 offset-bottom 属性，可以实现在容器内的吸底效果。

<l-sticky-box style="height: 200px; background-color: #f5f5f5; justify-content: flex-end;">
  <l-sticky :offset-bottom="44">
    <button>容器中吸底</button>
  </l-sticky>
</l-sticky-box>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-sticky/components/lime-sticky -->
<lime-sticky />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Sticky Props 属性说明

StickyBox Props 属性说明

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助