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 | string | 0 |
anchors | 设置自定义锚点, 单位 px | number | [100, windowHeight * 0.6] |
duration | 动画时长,单位秒,设置为 0 可以禁用动画 | number | string | 0.3 |
content-draggable | 允许拖拽内容容器 | boolean | true |
lock-scroll | 当不拖拽时,是否锁定背景滚动 | boolean | false |
safe-area-inset-bottom | 是否开启底部安全区适配 | boolean | true |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
height-change | 面板显示高度改变且结束拖动后触发 |
Slots
Name | Description |
---|---|
default | 自定义面板内容 |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
Name | Default Value | Description |
---|---|---|
--z-floating-panel-border-radius | 32rpx | - |
--z-floating-panel-header-height | 60rpx | - |
--z-floating-panel-z-index | 999 | - |
--z-floating-panel-background | var(--z-background-2) | - |
--z-floating-panel-bar-width | 40rpx | - |
--z-floating-panel-bar-height | 6rpx | - |
--z-floating-panel-bar-color | var(--z-gray-5) | - |