有没有办法制作一个离子模态表来捕捉 Ionic V6 中的 header

Question

我目前正在使用 Ionic V6 开发一个应用程序，我想知道当它像 Uber Eats 应用程序一样完全滑动时，是否可以让一个离子模态表捕捉 header？

提前感谢您的回答，祝您有美好的一天！

Answer 1

对于那些想知道如何做到这一点的人，这是我设法得到类似东西的方法：

首先，如果您的 header 始终位于您创建模态的同一页面中，请使用模板引用变量而不是身份证：

<header
 id="getHeight"
 [title]="'Solutions disponibles'"
 [displayGoBack]="true"></header>

然后我创建了一个助手来：

• 获取 header 的高度（在 iOS 和 Android 之间可以不同）
• 获取身体高度
• 使用 body 高度和 header 高度返回我的模态应该具有的高度，以 px 和 % 为单位

export const getContentHeight = (): any => {
  const header = document.querySelector('#getHeight');
  const body = document.querySelector('body');
  if (body && header) {
    const percent = (100 - (header.clientHeight * 100 / body.clientHeight));
    return {
      height: body.clientHeight - header.clientHeight,
      percent: percent
    }
  }
}

之后，我创建了另一个助手来在断点达到 0.9 时更改模态的视觉方面：

export const setModalSheetContentHeight = (modal: HTMLIonModalElement, breakpoint: number, expand: boolean): any => {
  if (breakpoint >= 0.9 && !expand) {
    modal.classList.add('no-radius');
    modal.setCurrentBreakpoint(1);
    expand = true;
  } else if (breakpoint <= 0.9 && expand) {
    modal.classList.remove('no-radius');
    expand = false;
  }
  return expand;
}

boolean “扩展”避免了助手总是将模态断点设置为 1。

然后我创建了一个在模式上添加一些侦听器的方法：

initModalListener(): void {
    let expand = false;
    // Define if the modal is fully expand
    const content = getContentHeight();
    // Return an object with content height in px and in %
    addEventListener('ionModalWillPresent', () => {
      this.modal.setAttribute('style', `--height: ${content.height}px`);
      // Set the modal height before it shown to avoid visual bug
    });
    addEventListener('ionBreakpointDidChange', (e: any) => {
      const breakpoint = e.detail.breakpoint;
      expand = setModalSheetContentHeight(this.modal, breakpoint, expand);
    });
  }

毕竟我在创建我的模态的方法中调用了这个方法：

 private async presentModal(): Promise<void> {
    this.modal = await this.modalCtrl.create({
      component: YourModalComponent,
      breakpoints: [0.3, 0.65, 1],
      initialBreakpoint: 0.3,
      backdropBreakpoint: 1,
      showBackdrop: false,
      canDismiss: false,
      keyboardClose: true,
      id: 'modalSheet',
      }
    });
    this.initModalListener();
    await this.modal.present();
  }

这是第一次拍摄，所以我确信有很多东西需要调整，但现在，它与 Ionic 6 配合得很好。