FloatingPanel 浮动面板
拖动底部面板,在不同锚点之间停靠。
底部可拖拽的浮动面板,支持多锚点停靠,拖拽条控制面板展开/收起高度
演示
9:41
代码示例
引入
推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-floating-panel />。
API
FloatingPanel Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| visible | boolean | true | 是否显示 | N |
| anchors | Array<number> | 锚点位置数组(单位px),定义面板可停靠的位置 | N | |
| height | number | 0 | 当前面板高度 | N |
| minHeight | number | 100 | 最小高度 | N |
| maxHeight | number | 600 | 最大高度 | N |
| duration | number | 300 | 动画时长(单位ms) | N |
| showDragBar | boolean | true | 是否显示拖拽条 | N |
| dragBarColor | string | "" | 拖拽条颜色 | N |
| dragBarWidth | string | "" | 拖拽条宽度 | N |
| dragBarHeight | string | "" | 拖拽条高度 | N |
| contentDraggable | boolean | false | 内容区是否可拖拽 | N |
| safeAreaInsetBottom | boolean | true | 是否开启底部安全区适配 | N |
| customStyle | string | "" | 自定义样式 | N |
FloatingPanel Events
| 名称 | 参数 | 描述 |
|---|---|---|
| update:height | value: number | - |
| update:visible | value: boolean | 显隐变化时触发 |
| change | height: number | 值变化时触发 |
FloatingPanel Slots
| 名称 | 描述 |
|---|---|
| default | 默认插槽 |
