FloatingPanel 浮动面板

介绍

浮动在页面底部的面板,可以上下拖动来浏览内容,常用于提供额外的功能或信息。

代码演示

基础用法

FloatingPanel 的默认高度为 100px,用户可以拖动来展开面板,使高度达到 60% 的屏幕高度。

<z-floating-panel>
  <z-cell-group>
    <z-cell
      v-for="i in 26"
      :key="i"
      :title="String.fromCharCode(i + 64)"
      size="large"
    />
  </z-cell-group>
</z-floating-panel>

自定义锚点

你可以通过 anchors 属性来设置 FloatingPanel 的锚点位置,并通过 v-model:height 来控制当前面板的显示高度。

比如,使面板的高度在 100px、40% 屏幕高度和 70% 屏幕高度三个位置停靠:

<z-floating-panel v-model:height="height" :anchors="anchors">
  <view style="padding: 30rpx; text-align: center">
    <text>面板显示高度 {{ height.toFixed(0) }} px</text>
  </view>
</z-floating-panel>
import { computed, ref } from 'vue'
const windowHeight = computed(() => {
  return uni.getSystemInfoSync().windowHeight
})
const anchors = [
  100,
  Math.round(0.4 * windowHeight.value),
  Math.round(0.7 * windowHeight.value)
]

const height = ref(anchors[0])

仅头部拖拽

默认情况下,FloatingPanel 的头部区域和内容区域都可以被拖拽,你可以通过 content-draggable 属性来禁用内容区域的拖拽。

<z-floating-panel :content-draggable="false">
  <view style="padding: 30rpx; text-align: center">
    <text>内容不可拖拽</text>
  </view>
</z-floating-panel>

API

Props

参数说明类型默认值
v-model:height当前面板的显示高度number | string0
anchors设置自定义锚点, 单位 pxnumber[100, windowHeight * 0.6]
duration动画时长,单位秒,设置为 0 可以禁用动画number | string0.3
content-draggable允许拖拽内容容器booleantrue
lock-scroll当不拖拽时,是否锁定背景滚动booleanfalse
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Events

事件名说明回调参数
height-change面板显示高度改变且结束拖动后触发

Slots

NameDescription
default自定义面板内容

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

NameDefault ValueDescription
--z-floating-panel-border-radius32rpx-
--z-floating-panel-header-height60rpx-
--z-floating-panel-z-index999-
--z-floating-panel-backgroundvar(--z-background-2)-
--z-floating-panel-bar-width40rpx-
--z-floating-panel-bar-height6rpx-
--z-floating-panel-bar-colorvar(--z-gray-5)-