Ionic 4问题：使用ion-refresh时ion-footer变为透明

嘿，我之前做Ionic4项目时也碰到过几乎一模一样的问题，下拉刷新时footer突然变透明，折腾了好一会儿才找到几个靠谱的解决办法，咱们来看看：

问题根源 #

你给ion-refresher加了slot="fixed"属性，这个设置会让刷新组件固定在ion-content的顶部区域，当下拉触发刷新时，Ionic内部的滚动和层级计算可能会干扰到ion-footer的默认样式，导致它的背景或层级出现异常，看起来就像变透明了。

具体解决办法 #

1. 给ion-footer增加层级和固定定位

在你的全局样式或者组件样式里添加这段CSS，确保footer始终在刷新组件之上：

ion-footer {
  z-index: 10; /* 比ion-refresher默认的z-index高即可，Ionic默认refresher层级是5 */
  position: relative;
}

ion-footer ion-toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
}

这样能强制footer保持在页面底部，并且不会被刷新组件的层级覆盖。

2. 移除ion-refresher的slot="fixed"属性

如果你的布局不需要刷新组件固定在顶部，可以直接去掉slot="fixed"，让refresher默认嵌入在ion-content内部，这样下拉刷新的操作就不会影响到footer的布局了：

<ion-content padding color="primary">
  <!-- 去掉slot="fixed" -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content color="primary" pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <div *ngFor="let weather of weather_data">
    <!-- 你的内容 -->
  </div>
</ion-content>
<ion-footer>
  <ion-toolbar color="white">
    <div class="tabs">
      <div class="tab">
        <ion-icon name="keypad"></ion-icon>
        <div class="label">Input</div>
      </div>
      <div class="tab">
        <ion-icon name="person"></ion-icon>
        <div class="label">Account</div>
      </div>
      <div class="tab">
        <ion-icon name="log-out"></ion-icon>
        <div class="label">Log Out</div>
      </div>
    </div>
  </ion-toolbar>
</ion-footer>

3. 调整ion-content的背景设置

如果你的ion-content设置了color="primary"，可以试试把背景样式单独用CSS设置，避免和refresher的颜色属性冲突：

ion-content {
  --background: var(--ion-color-primary);
  padding: 16px; /* 代替原有的padding属性 */
}

你可以先试试第一种方法，大部分情况下都能解决问题，如果不行再尝试后面的方案。

内容的提问来源于stack exchange，提问作者Ryan