FloatingPanel Floating Panel

A panel floating at the bottom of the page. Users can drag the panel up and down to browse content, allowing access to more information without leaving the current view. Commonly used for map navigation.

Component Type

Basic Usage

The initial height of FloatingPanel takes the value of anchors[0], which is 100px. Users can drag to expand the panel to reach 60% of the screen height.

vue/html

<wd-floating-panel>
  <wd-cell-group border>
    <wd-cell v-for="item in data" :key="item" :title="item" />
  </wd-cell-group>
</wd-floating-panel>

typescript

import { ref } from 'vue'

const data = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])

Component Variants

Custom Anchors

You can set the anchor positions of FloatingPanel via the anchors attribute, and control the current display height of the panel via v-model:height.

For example, to make the panel height dock at three positions: 100px, 40% of screen height, and 70% of screen height:

vue/html

<wd-floating-panel v-model:height="height" :anchors="anchors" @heightChange="handleHeightChange">
  <view class="inner-content">Custom Anchors {{ anchors }} - {{ height.toFixed(0) }}</view>
</wd-floating-panel>

typescript

import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const height = ref<number>(0)
const windowHeight = ref<number>(0)
const anchors = ref<number[]>([])

const handleHeightChange = ({ height }: { height: number }) => {
  console.log(height)
}

onLoad(() => {
  windowHeight.value = uni.getSystemInfoSync().windowHeight
  anchors.value = [100, Math.round(0.4 * windowHeight.value), Math.round(0.7 * windowHeight.value)]
  height.value = anchors.value[1]
})

css

.inner-content {
  padding: 1rem;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

Component State

Header Drag Only

By default, both the header area and content area of FloatingPanel can be dragged. You can disable dragging of the content area via the contentDraggable attribute.

vue/html

<wd-floating-panel :content-draggable="false">
  <view class="inner-content">Content area cannot be dragged</view>
</wd-floating-panel>

css

.inner-content {
  padding: 1rem;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

Attributes

Parameter	Description	Type	Default Value
v-model:height v1.3.12	Current display height of the panel	number	0
anchors v1.3.12	Set custom anchors, unit px	number[]	[100, windowHeight * 0.6]
duration v1.3.12	Animation duration, unit ms. Set to 0 to disable animation	number	300
content-draggable v1.3.12	Allow dragging content container	boolean	true
safe-area-inset-bottom v1.3.12	Whether to enable bottom safe area adaptation	boolean	false
show-scrollbar v1.3.12	Whether to enable scrollbar	boolean	true
custom-class	Custom class name for root node	string	''
custom-style	Custom style for root node	string	''

Slots

Name	Description
default	Default content area slot v1.3.12

Events

Method Name	Description	Parameters
heightChange	Triggered after panel display height changes and dragging ends v1.3.12	{ height: number }

主题定制

CSS 变量

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

名称	默认值	描述
--wot-floating-panel-bg	$filled-oppo	面板背景色
--wot-floating-panel-radius	$radius-large	面板圆角
--wot-floating-panel-z-index	99	面板 z-index
--wot-floating-panel-header-height	$n-32	头部高度
--wot-floating-panel-bar-width	$n-36	拖拽条宽度
--wot-floating-panel-bar-height	$n-4	拖拽条高度
--wot-floating-panel-bar-bg	$filled-strong	拖拽条背景色
--wot-floating-panel-bar-radius	$radius-main	拖拽条圆角
--wot-floating-panel-content-bg	$filled-oppo	内容区域背景色

Source Code

Documentation

• Component