ionic3 - 渐变（透明）导航栏

有图有真相

渐变导航栏

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

HTML配置属性

    

        
        
    


  ...

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配置属性

    
        Header
    


  ...

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