Ionic3 透明导航栏、渐变导航栏

在ionic中实现透明导航栏非常简单，主要用到三个属性:

1、no-border

2、transparent

3、fullscreen

先来看看效果图：

1.gif

实现代码：

//加入no-border让header无边框
    //加入transparent让header透明
        
            About
        
    



    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
    

为了显示效果在对应的scss中加入以下样式：

    ion-content {
        background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507605781398&di=5ecc84b6db4d03e58a73e54d3e8d14ff&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140221%2F234921-1402210U91038.jpg");
        background-position-x: 50%;
        background-size: cover;
        background-repeat: no-repeat;
    }

实现了透明导航栏，同样就可以实现导航栏的渐变，只需要根据content距离顶部的值，来改变header的opacity即可实现。

//修改页面代码为：

    
        
            About
        
    



    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
    

对应页面ts代码为：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {

  @ViewChild("header") header;
  constructor(public navCtrl: NavController) {

  }

  scrollEvent(e) {
    let opacity = (300 - e.scrollTop) / 300;//设置滚动距离300的时候导航栏消失
    this.header._elementRef.nativeElement.style.opacity = opacity;
  }

}

具体效果：

2.gif