ionic 实现类似 iOS 区头悬浮效果
2018-03-01 本文已影响13人
壹点微尘
实现页面头部保持不动的方法,适配 Android 和 iOS。 页面示意图如下,main中的list向上滑动时,header的位置保持不动,固定在头部。:
悬浮效果
html代码如下:
<ion-header>
<ion-navbar>
<ion-title>
title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div [class.ios-list-header]="version==='ios'" [class.android-list-header]="version==='android'">
header
</div>
<div [class.android-list-content-top]="version==='android'">
main/list
</div>
</ion-content>
ts文件获取平台的代码如下:
import { Platform } from 'ionic-angular';
private version:string;
constructor(private platform: Platform) {
if (this.platform.is('android')) {
this.version = 'android';
}
else if (this.platform.is('ios')) {
this.version= 'ios';
}
}
scss文件如下:
.ios-list-header {
width: 100%;
height: 80px;
position: sticky;
z-index: 1;
top: 0;
}
.android-list-header {
width: 100%;
height: 80px;
position: fixed;
z-index: 1;
top: 54px;
}
.android-list-content-top {
margin-top: 80px !important;
}
ion-header 标签无论在哪个平台都是固定在最上面的。但是在 ion-content中固定头部内容, iOS 直接使用 sticky就可以了,由于 Chrome 不支持这个属性,所以我们使用 fixed 来代替,同时还要设置 main 至头部的距离,以免被 header 遮挡住。