jk's notes
  • FloatingPanel 浮动面板

FloatingPanel 浮动面板

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/floating-panel

一个容器, 用于显示附加的数据. 默认在页面底部展示一个部分, 由用户拖拽显示更多内容.

用法:

<van-floating-panel></van-floating-panel>

基础用法, 就是一个容器, 其他功能已经内置.

扩展用法:

  • 使用 v-model:height 来绑定高度.
  • 使用 anchers: number[] 来定义停靠锚点, 会自动进行就近停靠. 例如 [100, Math.round(0.5 * window.innerHeight)]
  • 使用属性 :content-draggable="false" 表示只允许拖拽头部.

image-20240114000137807

有一个事件 height-change 实时跟踪高度的变化, 高度以参数的形式传入.

Last Updated:
Contributors: jk