【问题标题】:Ionic how to align ion-content to bottom of page离子如何将离子含量与页面底部对齐
【发布时间】:2020-08-13 05:31:04
【问题描述】:

我正在尝试将消息输入框与页面底部对齐,但似乎无法正常工作。我尝试使用 align-self-end 并为 ion-footer 创建一个 css 类。

<ion-content>
<ion-footer align-self-end>
  <ion-toolbar color="light">
    <ion-row align-self-end>
      <ion-col size="10">
        <ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
          (click)="sendMessage()">
          <ion-icon name="paper-plane"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer> 
</ion-content>
ion-footer{
    display: flex;
    align-items: flex-end;
    margin: auto; 
    padding-top: .5em;
    padding-bottom: .5em;
  }

【问题讨论】:

  • 离子版本是什么?
  • 版本 CLI 4.12.0

标签: css angularjs ionic-framework ionic4


【解决方案1】:

&lt;ion-footer&gt; 并不意味着进入&lt;ion-content&gt;

html文件的结构应该是

<ion-header>
</ion-header>

<ion-content>
</ion-content>

<ion-footer>
</ion-footer>

如果您想在内容底部显示另一个元素,您可以像这样插入 textarea..不要将 ion-row 放在 ion-toolbar 内。

<ion-content>
</ion-content>


<ion-footer>
    <ion-toolbar>
        <ion-textarea maxRows="4" [(ngModel)]="message" placeholder="Write a message"></ion-textarea>
        <ion-icon name="paper-plane" slot="end"></ion-icon>
    </ion-toolbar>
</ion-footer>

【讨论】:

  • 当这样设置页面时,我注意到页脚和页眉总是显示。我希望内容在滚动内容时上下滚动以隐藏页脚和页眉。看起来 Ionic 迫使开发人员让页眉和页脚始终可见。我对此不正确吗?我无法辨别如何解决问题。我宁愿在页脚显示之前让内容一直向下滚动。
  • 您可以通过在ion-content 中实现ion-toolbar 来跳过页眉和页脚。但是视图会干扰设备凹槽。如果要动态隐藏页眉页脚,请检查此答案stackoverflow.com/a/56996295/5379936 和此joshmorony.com/…
猜你喜欢
  • 2017-12-23
  • 1970-01-01
  • 2020-10-25
  • 2016-01-23
  • 2020-11-01
  • 2020-08-01
  • 1970-01-01
  • 2019-08-02
  • 2018-09-06
相关资源
最近更新 更多