需要用到的属性:
- no-border //ion-header 去除边框
- transparent //ion-toolbar 透明背景 - 这个没用到
- fullscreen //ion-content 占全屏
-
scrollEvents //ion-content 滚动标识
代码HTML
<ion-header no-border>
<ion-toolbar transparent #header>
<ion-buttons slot="start">
<ion-button (click)="goBack()">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-toolbar>
<ion-button (click)="goBack()" class="cloneBtn" fill="clear" *ngIf="setContentTop">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
<ion-title class="cloneTitle" *ngIf="setContentTop">{{title}}</ion-title>
</ion-header>
<ion-content fullscreen scrollEvents (ionScroll)="scrollEvent($event)" #contentView
[ngClass]="{'content-clear': setContentTop}">
。。。
</ion-content>
JS
scrollEvent(e) {
console.log(this.header.el.style)
if (this.setContentTop) {
let opacity = (e.detail.scrollTop-80) / 80;//设置滚动距离80的时候导航栏出现
this.header.el.style.opacity = opacity;
}
}