外观
FloatPanel 浮动面板
约 800 字大约 3 分钟
2025-10-31
基础使用
通过设置height属性配置面板高度,默认高度为600px。 通过anchors属性配置锚点位置,支持多个锚点。[200, 600] 表示面板展开时的高度为200px,向上拖动时面板展开到600px的位置
<template>
<un-float-panel :anchors="[200, 600]">
<scroll-view scroll-y direction="vertical" style="flex: 1">
<view v-for="i in 30" :key="i" class="un-float-panel__list-item">列表项 {{ i }}</view>
</scroll-view>
</un-float-panel>
</template>显示遮罩层
设置overlay属性显示遮罩层,closeOnClickOverlay属性允许点击遮罩关闭面板。
<template>
<un-float-panel overlay closeOnClickOverlay :anchors="[200, 500]">
面板内容
</un-float-panel>
</template>自定义遮罩透明度
通过overlayOpacity属性设置遮罩层透明度,overlayFade属性控制是否启用遮罩层淡入淡出效果。
<template>
<un-float-panel overlay :overlayOpacity="0.7" :overlayFade="true" :anchors="[200, 500]">
面板内容
</un-float-panel>
</template>仅头部拖拽
设置contentDraggable为false,仅允许通过头部拖拽面板。
<template>
<un-float-panel :contentDraggable="false" :anchors="[200, 500]">
<scroll-view scroll-y direction="vertical" style="flex: 1">
<view v-for="i in 30" :key="i" class="un-float-panel__list-item">列表项 {{ i }}</view>
</scroll-view>
</un-float-panel>
</template>自定义头部
通过handle插槽自定义头部内容。
<template>
<un-float-panel :anchors="[200, 500]">
<template #handle>
<view class="custom-handle">
<text>拖拽头部</text>
</view>
</template>
面板内容
</un-float-panel>
</template>
<style scoped>
.custom-handle {
padding: 20rpx;
text-align: center;
color: #666;
font-size: 28rpx;
}
</style>锚点跳转
通过ref调用toAnchor方法跳转到指定锚点。
<template>
<un-float-panel ref="floatPanelRef" :anchors="[200, 500]">
面板内容
</un-float-panel>
<un-button text="跳转到锚点1" @click="jumpToAnchor(1)"></un-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const floatPanelRef = ref<UnFloatPanelComponentPublicInstance | null>(null);
const jumpToAnchor = (index: number) => {
floatPanelRef.value?.toAnchor(index);
}
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 面板高度 | number | 600 |
| anchors | 自定义锚点配置,支持像素或百分比 | number[] | [] |
| safeAreaInsetBottom | 是否适配底部安全区域 | boolean | true |
| contentDraggable | 是否允许内容拖动 | boolean | true |
| overlay | 是否显示遮罩层 | boolean | false |
| overlayOpacity | 遮罩层透明度 | number \ string | 0.35 |
| closeOnClickOverlay | 是否点击遮罩关闭面板 | boolean | false |
| overlayFade | 是否启用遮罩层淡入淡出效果 | boolean | true |
| bgColor | 面板背景颜色 | string | #ffffff |
| duration | 动画持续时间 | string \ number | 300 |
| defaultAnchor | 默认显示的锚点索引 | number | 0 |
| scrollable | 是否可滚动 | boolean | true |
| zIndex | 面板层级 | number | 1000 |
Event
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 面板位置变化时触发 | Function |
| move | 面板移动时触发 | Function |
Method
| 方法名 | 说明 | 参数 |
|---|---|---|
| toAnchor | 跳转到指定锚点 | (index: number) => void |
Slot
| 插槽名 | 说明 |
|---|---|
| handle | 自定义头部内容 |
| default | 面板主体内容 |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-float-panel-bg-color | #ffffff | 面板背景颜色 |
| $un-float-panel-z-index | 1000 | 面板层级 |
| $un-float-panel-radius | 10px | 面板圆角 |
| $un-float-panel-handle-padding | 10px 0 | 头部内边距 |
| $un-float-panel-handle-bar-color | rgba(0, 0, 0, 0.15) | 头部拖拽条颜色 |
| $un-float-panel-handle-bar-width | 40px | 头部拖拽条宽度 |
| $un-float-panel-handle-bar-height | 4px | 头部拖拽条高度 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
