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>

Props

Events

Slots

样式变量

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