基础使用

通过设置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 变量使用 文档