底部面板嵌套列表滑动案例

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, height: number, mode: PanelMode) => {
  switch (mode) {
    case PanelMode.Full: {
      this.mode = PanelMode.Full;
      this.isOpen = true;
      break;
    }
    case PanelMode.Half: {
      this.mode = PanelMode.Half;
      this.isOpen = false;
      break;
    }
    case PanelMode.Mini: {
      this.show = false;
    }
  }
})

loadMyPanelList() {
  List({ initialIndex: 0, scroller: this.listScroller }) {
    LazyForEach(this.panelList, (item: PanelDataType) => {
      ListItem() {
        panelListItem({ desc: item.desc, include: item.include })
      }
      .width(FULL_SIZE)
    }, (item: PanelDataType) => item.desc)
  }
  ...
  .enabled(this.isOpen)
}

.onTouch((event?: TouchEvent) => {
  // panel展开时滑动事件
  if (event) {
    switch (event.type) {
      case TouchType.Down: {
        // 记录手机按下屏幕时的纵坐标
        this.yStart = event.touches[0].y;
        break;
      }
      case TouchType.Up: {
        break;
      }
      case TouchType.Move: {
        let yEnd: number = event.touches[0].y;
        // 判断是上滑还是下滑
        if (this.yStart < yEnd) {
          // 下滑
          this.isUp = false;
          // 在手指下滑且panel内列表达到顶部的情况下，panel回到half模式
          if (this.startIndex === 0 && this.isUp === false) {
            this.mode = PanelMode.Half;
          }
          return;
        } else {
          // 上滑
          this.isUp = true;
          return;
        }
      }
    }
  }
})

bottompanelsilde                     // har类型
|---src/main/ets/components
|   |---Component                    // 自定义组件
|---src/main/ets/view
|   |---BottomPanelSilde.ets         // panel嵌套列表滑动界面