更新记录

1.0.0（2025-04-08）

新增

• 新增浮动面板组件
• 支持自定义面板高度
• 支持多个锚点定位
• 支持内容区域拖拽
• 支持底部安全区适配
• 支持滚动锁定
• 支持最小/最大高度限制
• 支持平滑的动画过渡效果

优化

• 优化拖拽体验
• 优化动画效果
• 优化文档展示

平台兼容性

scory-floatingPanel 浮动面板组件

组件介绍

FloatingPanel 是一个可拖拽的浮动面板组件，支持自定义高度、锚点定位、安全区适配等功能。常用于移动端底部弹出层、抽屉等场景。

功能特性

• 支持自定义面板高度
• 支持多个锚点定位
• 支持内容区域拖拽
• 支持底部安全区适配
• 支持滚动锁定
• 支持最小/最大高度限制
• 平滑的动画过渡效果

示例展示

静态效果

拖拽效果

拖拽效果

属性说明

事件

使用示例

<template>
  <floating-panel
    :height="300"
    :anchors="[100, 300, 500]"
    :min-height="100"
    :max-height="500"
    @heightChange="onHeightChange"
  >
    <div>面板内容</div>
  </floating-panel>
</template>

<script setup>
const onHeightChange = (height) => {
  console.log('面板高度变化:', height)
}
</script>

注意事项

1. 组件默认开启底部安全区适配，可通过 safeAreaInsetBottom 属性关闭
2. 拖拽时会自动吸附到最近的锚点位置
3. 超出最小/最大高度限制时会有阻尼效果
4. 建议设置合适的锚点值以获得更好的用户体验