FloatPanel 滑动面板

内容型面板,用户可自由灵活上下滑动浏览内容

  • 面板初始高度默认窗口高度 18%,手指向上滑动面板升起到默认 35 %,继续向上滑动面板高度达到最大默认 95%
  • 手指下滑面板先回到默认 35%,继续向下滑动回到默认 18%
  • 面板内容区域在面板达到最大高度后可滑动

注意事项

需基础库版本大于 2.7.7 设置最低基础版本库

代码示例

基础使用

事件监听

属性

属性类型必填默认值说明
minHeightnumber0.18面板最大高度,单位为页面高度百分比
middleHeightnumber0.35面板次最大高度,单位为页面高度百分比
maxHeightnumber0.9面板最小高度,单位为页面高度百分比
lowerThresholdnumber50距离内容区域底部多远触发 onContentToBottom 回调
withMaskbooleantrue开启蒙层,默认透明
classNamestring-组件根节点类

事件

事件名说明类型
onContentToBottom内容区域滚动到底部,常用于数据加载() => void
onScroll面板滚动结束回调(status: 'MAX' | 'MIDDLE' | 'MIN') => void

插槽

名称说明
header头部内容插槽
content滑动内容插槽
footer尾部内容插槽

样式类

类名说明
amd-swiper-box组件根节点
amd-swiper-arrow-wrapper指示器样式
amd-swiper-header头部区域样式
amd-swiper-scroll-view内容区域 scroll-view 样式
amd-swiper-footer底部区域样式
amd-swiper-background蒙层样式