ionic——页面上面固定，下面浮动显示（可滑动）

前言

  小编最近在做ionic项目的时候，在页面显示的内容上有这么一个需求，要求题目固定，但是评论是可滑动的，下面就是小编的解决办法

<ion-header>
  <ion-toolbar>
    <ion-icon slot="start" color="primary" size="large" name="arrow-back" (click)="goback()"></ion-icon>
    <ion-title>问题</ion-title>
  </ion-toolbar>
  <!-- 标题 -->
  <ion-list style="padding:3% 2%;margin-top:2%;margin-bottom:0%;background-color: white;" p>
    <ion-label style="font-size:18px;font-weight: bold;">{{problemDetail.name}}</ion-label>
  </ion-list>
  <!-- 问题描述 -->
  <ion-list style="padding:0% 3% 3%;margin:0px;">
    <ion-label style="font-size:16px;">{{problemDetail.detail}}
    </ion-label>
    <span #id style="display:none">{{problemDetail.id}}</span>
    <!-- 回答 -->
    <ion-item-divider style="font-size: 12px;margin:0%;color:gray;" color="light">{{answerLength}}个回答</ion-item-divider>
  </ion-list>
  <div style="height: 1px;background: #dbdbdb;transform: scaleY(0.5);"></div>
  <!-- 按钮 -->
  <ion-list style="padding:0%;margin:0%;">
    <ion-item lines="none" style="float: left;width: 50%;height:70%;margin:0%;" (click)="invitation()">
      <ion-label style="text-align: center;color:#0084ff">
        <ion-icon color="primary" size="small" name="person-add"></ion-icon>邀请回答</ion-label>
    </ion-item>
    <ion-item lines="none" style="float: right;width: 50%;height:70%;margin:0%;" (click)="gotoWrite()">
      <ion-label style="text-align: center;color:#0084ff">
        <ion-icon color="primary" size="small" name="create"></ion-icon>写回答</ion-label>
    </ion-item>
  </ion-list>
</ion-header>

<ion-content color="light" scroll="false">
  <ion-label *ngIf="noProblemDetailResults" style="font-size:110%;width:90%;text-align: center;color: gray">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>暂无问题！
  </ion-label>
  <!-- 下拉加载 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
    <span class="progress" style="text-align:center;display: block;color: gray;">松开即可重新加载</span>
  </ion-refresher>
    <ion-list *ngFor="let list of answerList;let i=index" style="padding:0% 2% 2%;margin:0% 0% 2%;">
      <ion-item-divider style="font-size: 12px;margin:0%;display:inline-block;padding:0% 2%;;color:gray;background-color: white">@{{list.name}} | {{list.createTime}}</ion-item-divider>
      <ion-label style="font-size:16px;color:#434343;padding:0% 2% 10%;">{{list.answer}}</ion-label>
    </ion-list>
    <ion-fab vertical="bottom" (click)='collectionQuestion(problemDetail.id)' horizontal="end" slot="fixed">
      <ion-fab-button>
        <ion-button color="primary" style="width:100%">{{collectionQuestionText}}</ion-button>
      </ion-fab-button>
    </ion-fab>
</ion-content>
           

  由于是样式方面的问题，所以小编就不展示ts部分的方法了，实际效果是这样的

  如图，红框内为固定显示的内容，包括下面的收藏按钮，黑框是可滑动部分，红框内的内容不随动。

  其实就是把需要固定的内容放到了header里面，其他的东西放到content里就好了。

总结

  不要想当然，要多去尝试