ionic3 自定义页面头部

仿写一个上拉透明到白色的动画

html

<ion-header no-border>
	<!-- 返回和分享 -->
	<div #pnavs class="topspan">
		<div class="returnimg" (click)="goBack()">
			<img src="../../assets/imgs/return.png" alt="">
		</div>
		<div class="shareimg" (click)="appShare()">
			<img src="../../assets/imgs/share.png" alt="">
		</div>
	</div>
</ion-header>
<!-- 记得在ion-content 加上 如下 -->
<ion-content catch-view="false" fullscreen (ionScroll)="scrollEvent($event)">

scss

ion-header {

        .topspan {
            width: 100% !important;
            height: 48px !important;
            background-color: rgba(255, 255, 255, 0);
            position: fixed;
            // top: 0;
            // top: 20px; //app加20px;
            left: 0;
            z-index: 1231231;

            .returnimg {
                width: 9px;
                height: 27.3px;
                position: absolute;
                top: 8.8px;
                left: 22.5px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 8px;
                    height: 18px;
                    font-size: 0;
                }
            }

            .shareimg {
                width: 25px !important;
                height: 27.3px;
                position: absolute;
                right: 22.5px;
                top: 8.8px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 18px;
                    height: 18px;
                    font-size: 0;
                }
            }
        }
    }

ts

import { ... ViewChild } from '@angular/core';
import { ... Content } from 'ionic-angular';
.
.
.
@ViewChild('pnavs') sticknavs;
@ViewChild(Content) content: Content;
.
.
.
//页面滑动触发事件
scrollEvent(e) {
    if (e.scrollTop < 10) {
        this.sticknavs.nativeElement.style.background = "rgba(255,255,255,0)";
        this.sticknavs.nativeElement.style.opacity = 1;
    } else if (e.scrollTop > 10 && e.scrollTop < 375) {
        let opacity = (375 - e.scrollTop) / 375;
        this.sticknavs.nativeElement.style.opacity = 1 - opacity;
    } else {
	     this.sticknavs.nativeElement.style.opacity = 1;
        this.sticknavs.nativeElement.style.background = "rgba(255,255,255,1)";
	 }
}