#鸿蒙通关秘籍#如何实现鸿蒙底部面板嵌套列表滑动效果？

为了实现底部面板嵌套列表的滑动效果，可以遵循以下步骤：

1. 使用 Panel 组件来创建底部面板，设定其高度，通过 .miniHeight() 和 .halfHeight() 来定义 Mini 和 Half 展开的高度。

typescript Panel(this.show) { // panel内组件内容 } .miniHeight(MINI_PANEL_HEIGHT) .type(PanelType.Foldable) .mode(this.mode) .draggable(false) .halfHeight(HALF_PANEL_HEIGHT) .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 状态变量控制。

typescript 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. 通过在 onTouch 中判断手指滑动方向来控制 panel 模式的变化。

typescript .onTouch((event?: TouchEvent) => { if (event) { switch (event.type) { case TouchType.Down: { this.yStart = event.touches[0].y; break; } case TouchType.Move: { let yEnd: number = event.touches[0].y; if (this.yStart < yEnd) { this.isUp = false; if (this.startIndex === 0 && this.isUp === false) { this.mode = PanelMode.Half; } return; } else { this.isUp = true; return; } } } } })