Question

我正在使用tabview，在任一页面中都使用模态定位，位于页面底部。但我的布局底部隐藏在ios中的tabview后面。谁能提出一个克服这个想法的想法？我已附上我的页面here的屏幕截图我期待着这样的页面，here我已经附上了我的代码，

my-events.component.html

<GridLayout class="a-m-t-25">
  <StackLayout>
    <GridLayout row="*">
      <ListView class="cv-list" [items]="data" (itemTap)="onItemTap($event)">
        <ng-template let-item="item" let-i="index">
          <FlexboxLayout class="cv-list-item" alignItems="center">
            <StackLayout class="list-item-c">
              <FlexboxLayout flexDirection="column">
                <Label class="list-item-heading" [text]='item.name'></Label>
              </FlexboxLayout>
            </StackLayout>
          </FlexboxLayout>
        </ng-template>
      </ListView>
    </GridLayout>
  </StackLayout>
  <ns-modal *ngIf="showModal" [position]="'bottom'" (close)="showModal = false">
    <ns-event-attendance></ns-event-attendance>
  </ns-modal>
</GridLayout>

my-events.component.ts

onItemTap(args) {
  this.showModal = true;
  console.log(args.index);
}

modal.component.html

<GridLayout>
  <StackLayout (tap)="closeModal()" class="transparent-background"></StackLayout>
  <FlexboxLayout flexDirection="column" justifyContent="flex-end" >
    <StackLayout class="modal-container" (tap)="closeModal()"  >
      <FlexboxLayout  justifyContent="center" padding="20">
        <StackLayout  width="45" borderRadius="10" height="4" backgroundColor="#a9a9a9"></StackLayout>
      </FlexboxLayout>
      <StackLayout>
        <StackLayout borderColor="#DFE1E6" borderBottomWidth="1" padding="20">
          <FlexboxLayout flexDirection="column">
            <Label class="text-heading" text="Lake clean up"></Label>
            <Label class="list-item-sub" text="Tower park, Anna Nagar"></Label>
            <Label class="list-item-last" text="Thursday, November 5, 3:00 PM"></Label>
          </FlexboxLayout>
        </StackLayout>
        <StackLayout borderColor="#DFE1E6" borderBottomWidth="1" padding="20">
          <FlexboxLayout flexDirection="column">
            <Label class="text-normal" text="Role"></Label>
            <Label class="text-dull" text="Section Leader"></Label>
          </FlexboxLayout>
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </FlexboxLayout>
</GridLayout>

modal.component.ts

closeModal() {
  console.log('coming in '); 
  this.close.emit(true);
}

角本机模式在iOS中的tabview后面

0 个答案: