鸿蒙(HarmonyOS)应用开发实战——底部面板嵌套列表滑动案例

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。

效果图预览

使用说明

1. 点击底部“展开”，弹出panel面板。
2. 在panel半展开时，手指向上滑动panel高度充满页面，手指向下滑动panel隐藏。
3. 在panel完全展开时，panel内部列表不处于首项时，panel内列表跟随手指滑动；当列表位于首项，且手指向下滑动时，panel高度减小到半展开。

实现思路

本例涉及的关键特性和实现方案如下：

1. 通过mode属性设置panel的不同展开模式，miniHeight属性设置PanelMode.Mini模式的高度，halfHeight属性设置PanelMode.Half高度。通过onChange事件监听panel展开模式的变化，实现根据不同的panel模式来变化panel的高度。

Panel(this.show) {
   
    
  // panel内组件内容
}
.miniHeight(MINI_PANEL_HEIGHT) // panel最小高度
.type(PanelType.Foldable)
.mode(this.mode)
.draggable(false) // 关闭拖拽panel
.halfHeight(HALF_PANEL_HEIGHT) // panel一半高度
.onChange((width: number