离子底固定内容答案

【问题标题】：Ionic bottom fixed content离子底固定内容
【发布时间】：2018-07-12 04:57:34
【问题描述】：

我正在尝试实现一个简单的列表页面，并且我在屏幕底部显示一个固定按钮，该按钮永远不会与列表一起滚动，但使用我的代码按钮与列表一起滚动我如何解决这个问题有人可以帮助我请

html:

<ion-content padding>

    <div *ngIf="!events || events.length === 0">
        <p>No messages</p>
    </div>

  <div *ngIf="events && events?.length > 0">
    <ion-item-group *ngFor="let group of events | groupByCategory: 'date'">
      <ion-item-divider color="light">
        {{ group.key }}
      </ion-item-divider>
      <ion-item *ngFor="let event of group.list">{{ event.title }}</ion-item>
    </ion-item-group>
  </div>
  <div class="bottomright" (click)="add()">Add</div>
</ion-content>

css:

.bottomright {
        position: absolute;
        bottom: 8px;
        right: 16px;
        font-size: 18px;
        color: crimson;

    }

【问题讨论】：

将位置值从绝对值更改为固定值。这可能有效。

标签： ionic-framework ionic3

【解决方案1】：

您可以为此使用ion-footer

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

【讨论】：

不错..对我来说很好。最佳解决方案。如果您固定在底部，只需添加：位置：固定，底部：0；
使用position: sticky;，它不会阻止它后面的任何内容。一切都很好地移动到您的页脚上方。

【解决方案2】：

在html代码中，

<button ion-button class="custom-button" (click)="add()">Add</button>

在scss代码中，

.custom-button{
  position:fixed;
  right:0;
  bottom:0;
}

【讨论】：