LimeUI+1.2.1

主题

LimeSticky 粘性布局组件 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

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

吸顶距离 ​

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

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

容器中吸顶 ​

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

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

吸底距离 ​

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

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

容器中吸底 ​

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

html
<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>

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-sticky粘性布局组件标签
l-sticky-box粘性布局容器标签
lime-sticky演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Sticky Props 属性说明 ​

属性名说明类型默认值
offset-top吸顶时与顶部的距离，支持 px rpx 单位，默认 pxnumber | string0
offset-bottom吸底时与底部的距离，支持 px rpx 单位，默认 pxnumber | string0
z-index吸顶时的 z-indexnumber99
l-class自定义类名string-
l-style自定义样式string | object-
属性名说明类型默认值
l-class自定义类名string-
l-style自定义样式string | object-

Events 事件 ​

事件名说明回调参数
change当吸顶状态改变时触发isFixed: boolean

Slots 插槽 ​

名称说明
default默认插槽，用于放置需要吸顶/吸底的内容

主题定制 ​

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

变量名称默认值描述
--l-sticky-z-index99粘性布局的层级

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码