mp-floating-panel 浮动面板

参考 Vant UI 浮动面板

代码演示

WARNING

该组件在 dev:h5 模式下内容区域拖拽有点问题，但 build 模式正常，因此无需理会。

基本使用

默认仅头部可拖拽，可以通过传入 content-draggable 使内容区域也能拖拽：

<mp-floating-panel content-draggable>
  <div style="padding: 15px; text-align: center">
    <p>内容区域也可拖拽</p>
  </div>
</mp-floating-panel>

自定义瞄点和头部

<script setup>
import {device} from '@ifanrx/uni-mp'

const windowHeight = device.getWindowHeight()

const anchors = [
  150,
  Math.round(0.4 * windowHeight),
  Math.round(0.7 * windowHeight),
]

const visible = ref(false)

const height = ref(anchors[0])

const onToggleVisible = () => {
  visible.value = !visible.value
}
</script>

<template>
  <mp-floating-panel
    v-model:height="height"
    v-model:visible="visible"
    :anchors="anchors"
    content-draggable
  >
    <template #header>
      <view style="display: flex; align-items: center" @click="onToggleVisible">
        <uni-icons size="30" :type="visible ? 'bottom' : 'top'"></uni-icons>
      </view>
    </template>
    <div style="padding: 15px; text-align: center">
      <p>面板显示高度 {{ height.toFixed(0) }} px</p>
    </div>
  </mp-floating-panel>
</template>

禁止页面滚动

介绍文档：禁止页面滚动

API

Props

Prop name	Description	Type	Values	Default
height v-model	当前面板的显示高度	-	-
visible v-model	是否已打开，当有多个锚点的时候，仅当出于最后一个锚点才会为 true，其余情况为 false；同理，当设置为 true 的时候，会设置为最后一个锚点的高度	boolean	-
anchors	设置自定义锚点, 单位 px	array	-	[100, device.getWindowHeight() * 0.6]
duration	动画时长，单位秒，设置为 0 可以禁用动画	number|string	-	0.3
contentDraggable	允许拖拽内容容器 需要注意：当内容区域本身可以滚动时，不应该开启	boolean	-	false
headerClickable	允许点击头部展开	boolean	-	true
safeAreaInsetBottom	是否开启底部安全区适配	boolean	-	true

Events

Event name	Properties	Description
heightChange	height {height: string} - 高度	高度发生变化

Slots

Name	Description	Bindings
header	面板头部区域
default	面板内容区域

源码

组件 • 示例