LimeUI+1.2.0

主题

LimeFloatingPanel 浮动面板 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

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

自定义锚点 ​

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

html
<!-- 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>
js
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 属性来禁用内容区域的拖拽。

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

设置初始锚点位 ​

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

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

跳到指定锚点位 ​

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

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

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

快速预览 ​

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

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

插件标签说明 ​

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

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props ​

参数说明类型默认值
v-model:height当前面板的显示高度number | string0
anchors设置自定义锚点, 单位 pxnumber[][100, windowHeight * 0.6]
animation是否开启动画booleantrue
content-draggable允许拖拽内容容器booleantrue
safe-area-inset-bottom是否开启底部安全区域booleantrue
defaultAnchor默认的锚点下标，如果指定了就在会anchors里找到相应的高度number0
bgColor面板背景色string-
barColor顶部拖拽条颜色string-
duration动画时长（单位ms）number-

Events ​

事件名说明回调参数
heightChange面板显示高度改变且结束拖动后触发{ height: number }
change面板显示高度改变且结束拖动后触发{ height: number, index: number }

Slots ​

名称说明
default自定义面板内容

方法 ​

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

方法名说明参数返回值
toAnchor跳转到指定锚点位置index: number-

主题定制 ​

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

变量名称默认值描述
--l-floating-panel-border-radius$border-radius-xl面板圆角大小
--l-floating-panel-header-height30px面板头部高度
--l-floating-panel-z-index999面板层级
--l-floating-panel-bg-color$bg-color-elevated面板背景色
--l-floating-panel-bar-width30px拖拽条宽度
--l-floating-panel-bar-height3px拖拽条高度
--l-floating-panel-bar-color$fill-1拖拽条颜色
--l-floating-panel-bar-radius3px拖拽条圆角

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码