# FloatingPanel 浮动面板

浮动在页面底部的面板，用户可以通过上下拖动秒板来浏览内容，从而在不离开当前视图的情况下访问更多信息，常用于地图导航。

## 基本用法

FloatingPanel 的初始高度会取 `anchors[0]` 的值，也就是 `100px`，用户可以拖动来展开面板，使高度达到 `60%` 的屏幕高度。

```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>
```

```js
const data = ['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']
```

## 自定义锚点

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

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

```html
<wd-floating-panel v-model:height="height" :anchors="anchors" @heightChange="handleHeightChange">
  <view class="inner-content">自定义锚点 {{ anchors }} - {{ height.toFixed(0) }}</view>
</wd-floating-panel>
```

```js
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;
}
```

## 仅头部拖拽

默认情况下，<b>FloatingPanel</b> 的头部区域和内容区域都可以被拖拽，你可以通过 `contentDraggable` 属性来禁用内容区域的拖拽。

```html
<wd-floating-panel :contentDraggable="false">
  <view class="inner-content">内容区不可以拖拽</view>
</wd-floating-panel>
```

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

## Attributes

| 参数                | 说明                                        | 类型     | 可选值 | 默认值                      | 最低版本         |
| ------------------- | ------------------------------------------- | -------- | ------ | --------------------------- | ---------------- |
| v-model:height      | 当前面板的显示高度                          | number   | -      | `0`                         | 1.3.12 |
| anchors             | 设置自定义锚点, 单位 `px`                   | number[] | -      | `[100, windowHeight * 0.6]` | 1.3.12 |
| duration            | 动画时长，单位`ms`，设置为 `0` 可以禁用动画 | number   | -      | `300`                       | 1.3.12 |
| contentDraggable    | 允许拖拽内容容器                            | boolean  | -      | `true`                      | 1.3.12 |
| safeAreaInsetBottom | 是否开启底部安全区适配                      | boolean  | -      | `false`                     | 1.3.12 |
| showScrollbar       | 是否开启滚动条                              | boolean  | -      | `true`                      | 1.3.12 |

## Slots

| 名称 | 说明     | 最低版本         |
| ---- | -------- | ---------------- |
| —    | 默认插槽 | 1.3.12 |

## Events

| 方法名       | 说明                             | 参数                 | 最低版本         |
| ------------ | -------------------------------- | -------------------- | ---------------- |
| heightChange | 面板显示高度改变且结束拖动后触发 | `{ height: number }` | 1.3.12 |

## 外部样式类

| 类名         | 说明         | 最低版本         |
| ------------ | ------------ | ---------------- |
| custom-class | 根节点样式类 | 1.3.12 |
| custom-style | 根节点样式   | 1.3.12 |