@tanzhenxing/zx-floating-panel v1.0.1

zx-floating-panel 浮动面板

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

平台兼容性

基本用法

FloatingPanel 的默认高度为 100px（或 anchors 第一个值），用户可以拖动来展开面板。

<template>
  <zx-floating-panel v-model="showPanel" :height="150">
    <view>面板内容</view>
  </zx-floating-panel>
</template>

<script setup>
import { ref } from 'vue';
const showPanel = ref(true);
</script>

自定义锚点

通过 anchors 属性来设置 FloatingPanel 的锚点位置（单位 px），并通过 v-model:height (或 :height 和 @update:height) 来控制当前面板的显示高度。

例如，使面板的高度在 100px、40% 屏幕高度和 70% 屏幕高度三个位置停靠：

<template>
  <zx-floating-panel v-model="showPanel" v-model:height="panelHeight" :anchors="panelAnchors">
    <view style="text-align: center; padding: 15px">
      <text>面板显示高度 {{ panelHeight.toFixed(0) }} px</text>
    </view>
  </zx-floating-panel>
</template>

<script setup>
import { ref, computed } from 'vue';

const showPanel = ref(true);
const panelAnchors = computed(() => {
  const windowHeight = uni.getSystemInfoSync().windowHeight;
  return [
    100,
    Math.round(0.4 * windowHeight),
    Math.round(0.7 * windowHeight),
  ].sort((a,b) => a - b);
});
const panelHeight = ref(panelAnchors.value[0]);
</script>

仅头部拖拽

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

<template>
  <zx-floating-panel v-model="showPanel" :content-draggable="false">
    <view style="text-align: center; padding: 15px">
      <text>内容不可拖拽</text>
    </view>
  </zx-floating-panel>
</template>

<script setup>
import { ref } from 'vue';
const showPanel = ref(true);
</script>

API

Props

Events

Slots

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。

注意: 上述默认值参考了 Vant，实际组件内可能使用更通用的值或依赖项目主题配置。