ionic3 - 渐变（透明）导航栏 (实用）

原文出处：https://www.jianshu.com/p/e4d9340b4547  （建议阅读原文）

有图有真相

渐变导航栏

一、在ionic中实现透明导航栏非常简单，先介绍几个比较有用的属性:
1.no-border //ion-header 去除边框
2.transparent //ion-toolbar 透明背景 - 这个没用到
3.fullscreen //ion-content 占全屏

HTML配置属性

<ion-header no-border>
    <div class="seachr-panel">
        <input (click)="openSeachPage()" class="seach-text" type="text" readonly="readonly" placeholder="搜索商品" />
        <ion-icon name="search"></ion-icon>
    </div>
</ion-header>
<ion-content (ionScroll)="scrollToTop($event)" fullscreen>
  ...
</ion-content>

css样式

.scroll-content {
    padding-top: 0 !important; //content 内容置顶
}
page-home .seachr-panel {
    //配置渐变导航栏
    background: -webkit-linear-gradient(top, #FFB01D 50%, rgba(255, 176, 29, 0));
}

Javascript 改变渐变颜色

scrollToTop(event) {
        let _opacity = event.scrollTop / 44;
        if(_opacity > 1) _opacity = 1;
        var _seachrPanel = document.querySelectorAll("ion-header .seachr-panel")[0];
        _seachrPanel.style.backgroundImage = "linear-gradient(180deg, #FFB01D 50%, rgba(255, 176, 29, " + _opacity + "))";
}

二、透明导航栏制作

透明导航栏

HTML配置属性

<ion-header no-border>
    <ion-toolbar>
        <ion-title>Header</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content (ionScroll)="scrollToTop($event)" fullscreen>
  ...
</ion-content>

css样式

.scroll-content {
    padding-top: 0 !important; //content 内容置顶
}

Javascript 不透明度

scrollToTop(event) {
        let _opacity = event.scrollTop / 44;
        if(_opacity > 1) _opacity = 1;
        var _header = document.querySelectorAll("ion-header")[0];
        _header.style.opacity = _opacity;
}

小礼物走一走，来简书关注我