在工作表模式上启用滚动内容

Question

我想询问有关工作表模式的问题：https://ionicframework.com/docs/api/modal#sheet-modal
案例如图所示。我创建了一个带有断点

[0, 0.65, 1]

的工作表模态，默认断点为

0.65

，布局如下：

• 顶部：标题
• mid：内容（可滚动列表）

问题是，当初始断点设置为

0.65

打开模式时，

content

无法滚动。模式必须位于 max/1 断点处，内容才能滚动。

本例中我想要实现的目标是类似于 Instagram 应用中评论部分的布局，即使模态打开一半，评论列表仍然可以滚动。

Answer 1

要使您的内容可滚动，您可以执行以下解决方法：

主要模态代码：

<ion-modal #modal [isOpen]="isOpen" [initialBreakpoint]="0.65" [breakpoints]="[0, 65, 1]"
    (willDismiss)="isOpen = false">
    <ng-template>
      <ion-content>
        <inner-content-component></inner-content-component>
      </ion-content>
    </ng-template>
  </ion-modal>

在您的

inner-content-component

内再次使用

ion-content

：

<ion-content>
   <div>
     //your modal content here
    </div>
</ion-content>

注意：我在我的角度应用程序中做到了这一点，我不知道它是否会以同样的方式进行反应。