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

7z5jn7bk  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(165)

我目前正在开发一个使用离子V6的应用程序,我想知道是否有可能使一个离子模态表管理单元的标题时,它完全像优步吃应用程序滑动?

提前感谢您的回答,祝您有愉快的一天!

dly7yett

dly7yett1#

对于那些想知道如何做到这一点,这里是我如何设法得到类似的东西:
首先,我在我的头文件中添加了一个id(我的ion-header被 Package 在一个名为header的组件中)如果你的头文件总是在你创建modal的页面中,那么使用一个模板引用变量来代替id:

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

然后我创建了一个辅助对象来:

  • 获取标题的高度(iOS和Android之间可以不同)
  • 得到尸体的高度
  • 使用body height和header height返回我的modal应该具有的高度,单位为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;
}

布尔值“expand”避免帮助器总是将模态断点设置为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();
  }

这是第一次拍摄,所以我敢肯定,有很多东西要调整,但现在,它的工作相当不错的离子6。

相关问题