介紹

本示例主要介紹了利用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, 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;
    }
  }
})

2. 通過this.isOpen狀態變量，來控制panel中嵌套的列表是否可以滑動。

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)
}

3. 通過panel中嵌套的列表的onTouch事件，來控制嵌套的列表在滑動時，panel的展開模式。

.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;
        }
      }
    }
  }
})

高性能知識點

本示例使用了LazyForEach進行數據懶加載，List布局時會根據可視區域按需創建ListItem組件，并在ListItem滑出可視區域外時銷毀以降低內存占用。

工程結構&模塊類型

bottompanelsilde                     // har類型
|---src/main/ets/components
|   |---Component                    // 自定義組件
|---src/main/ets/view
|   |---BottomPanelSilde.ets         // panel嵌套列表滑動界面

寫在最后

如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：

• 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
• 關注小編，同時可以期待后續文章ing??，不定期分享原創知識。
• 想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu