FloatingPanel 浮动面板

拖动底部面板,在不同锚点之间停靠。

底部可拖拽的浮动面板,支持多锚点停靠,拖拽条控制面板展开/收起高度

演示

9:41

代码示例

<re-floating-panel :anchors="anchors" :height="panelHeight" :contentDraggable="true" dragBarColor="#1d2533" @change="onChange" @update:height="onUpdateHeight" > <view class="demo-panel"> <text class="demo-panel__title">探索内容</text> <text class="demo-panel__desc">向上拖动查看更多卡片,向下拖动收起浮层。</text> <view class="demo-panel__card" v-for="(item, index) in panelItems" :key="index"> <text class="demo-panel__card-title">{{ item.title }}</text> <text class="demo-panel__card-desc">{{ item.desc }}</text> </view> </view> </re-floating-panel>

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-floating-panel />。

API

FloatingPanel Props

名称类型默认值描述必传
visiblebooleantrue是否显示N
anchorsArray<number>锚点位置数组(单位px),定义面板可停靠的位置N
heightnumber0当前面板高度N
minHeightnumber100最小高度N
maxHeightnumber600最大高度N
durationnumber300动画时长(单位ms)N
showDragBarbooleantrue是否显示拖拽条N
dragBarColorstring""拖拽条颜色N
dragBarWidthstring""拖拽条宽度N
dragBarHeightstring""拖拽条高度N
contentDraggablebooleanfalse内容区是否可拖拽N
safeAreaInsetBottombooleantrue是否开启底部安全区适配N
customStylestring""自定义样式N

FloatingPanel Events

名称参数描述
update:heightvalue: number-
update:visiblevalue: boolean显隐变化时触发
changeheight: number值变化时触发

FloatingPanel Slots

名称描述
default默认插槽