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

柔光的暖阳◎ 2021-12-16 09:04 405阅读 0赞

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

有图有真相

![Image 1][]

渐变导航栏

一、在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 + "))";
    }

二、透明导航栏制作

![Image 1][]

透明导航栏

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;
    }

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

[https_www.jianshu.com_p_e4d9340b4547]: https://www.jianshu.com/p/e4d9340b4547
[Image 1]: