更新记录

0.1.7（2025-08-31） 下载此版本

• chore: 更新文档

0.1.6（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.1.5（2025-02-09） 下载此版本

• feat: 更改props类型，防止重复

平台兼容性

云端兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-floating-panel 浮动面板

浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

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

文档链接

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

• 浮动面板文档 - 站点1
• 浮动面板文档 - 站点2
• 浮动面板文档 - 站点3

安装方法

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

代码演示

基础用法

FloatingPanel 的默认高度为 100px，用户可以拖动来展开面板，使高度达到 60% 的屏幕高度。

<l-floating-panel>
  <view>内容</view>
</l-floating-panel>

自定义锚点

你可以通过 anchors 属性来设置 FloatingPanel 的锚点位置，并通过 v-model:height 来控制当前面板的显示高度。

<!-- vue3 使用 v-model:height -->
<!-- vue2 使用 :height.sync -->
<l-floating-panel v-model:height="height" :anchors="anchors">
  <view style="text-align: center; padding: 15px">
    <p>面板显示高度 {{ height.toFixed(0) }} px</p>
  </view>
</l-floating-panel>

import { ref } from 'vue';

export default {
  setup() {
    const {windowHeight} = uni.getSystemInfoSync()
    const anchors = [
      100,
      Math.round(0.4 * windowHeight),
      Math.round(0.7 * windowHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};

仅头部拖拽

默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 content-draggable 属性来禁用内容区域的拖拽。

<l-floating-panel :content-draggable="false">
  <view style="text-align: center; padding: 15px">
    <text>内容不可拖拽</text>
  </view>
</l-floating-panel>

设置初始锚点位

默认情况下，FloatingPanel 的初始锚点位为0，可以通过设置 defaultAnchor 改变初始锚点位。

<l-floating-panel :defaultAnchor="1">
  <view style="text-align: center; padding: 15px">
    <text>内容</text>
  </view>
</l-floating-panel>

跳到指定锚点位

FloatingPanel 暴露 toAnchor 方法，可以跳到指定的锚点位。

<l-floating-panel ref="floatingPanelRef">
  <view style="text-align: center; padding: 15px">
    <text>内容</text>
  </view>
</l-floating-panel>
<button @click="to">跳到1</button>

const floatingPanelRef = ref(null)

const to = () => floatingPanelRef.value.toAnchor(1)

快速预览

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

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

插件标签说明

• 默认 l-floating-panel 为组件标签
• 默认 lime-floating-panel 为演示标签

Vue2使用说明

main.js中添加以下代码：

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

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

API文档

Props

Events

Slots

方法

通过 ref 可以获取到 FloatingPanel 实例并调用实例方法。

主题定制

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

支持与赞赏

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

支付宝赞助	微信赞助