ionic3實現透明導覽列，ionic3導覽列

ionic3實現透明導覽列，ionic3導覽列

這裡（1）實現透明導覽列並且根據頁面滑動來調整導覽列的透明度（2）導覽列根據頁面滑動的%來隱藏，當向上滾動時在顯示。

實現效果如下：

實現以上效果：（1）你要在ion-content裡面定義一個div（class="headerNav"）用來類比導覽列的樣子，其次還要在這個div裡面定義一個div(class="header_bg")來設定當頁面滾動時導覽列的背景顏色等（這裡div裡面也寫導覽列的內容是由於：頁面滾動到ion-list的時候頁面為白色，這時候導覽列裡面的文字就看不見（導覽列裡文字為白色））。（2）導覽列根據頁面滾動的%來隱藏，這裡計算螢幕的高度，和目前滾動的高度，（3）判斷向上滾動還是向下滾動來確定是否顯示導覽列。

（1）

<ion-content id="home" >  <div class="headerNav" #headerNavHidden>    <div class="headerHome">      <ion-icon name="md-home"></ion-icon>    </div>    <div class="headerTitle">      <span>        二級次介面管理員      </span>    </div>    <div class="headerMenu">      <ion-icon name="md-menu"></ion-icon>    </div>    <div id="header_bg" #headBgColor>      <div class="headerHome">        <ion-icon name="md-home"></ion-icon>      </div>      <div class="headerTitle">        <span>          二級次介面管理員        </span>      </div>      <div class="headerMenu">        <ion-icon name="md-menu"></ion-icon>      </div>    </div>  </div>  <!-- scroll-content：絕對位置，內容元素佔滿整個螢幕 -->  <div #lyScroll scroll="false" class="scroll-content">    <div class="divpage">      <ion-slides pager>        <ion-slide>          <img src="assets/imgs/card-amsterdam.png">        </ion-slide>        <ion-slide>          <img src="assets/imgs/card-saopaolo.png">        </ion-slide>        <ion-slide>          <img src="assets/imgs/tianyuan.jpg">        </ion-slide>        <ion-slide>          <img src="assets/imgs/dujia.jpg">        </ion-slide>      </ion-slides>    </div>    <ion-list>      <ion-list-header>        列表查詢 此處放置列表條件檢索按鈕      </ion-list-header>      <ion-item-sliding *ngFor="let item of items;let i=index;">        <ion-item>          {{item.title}}        </ion-item>        <ion-item-options>          <button ion-button color="danger" (click)="deletitem(items,i)">            刪除          </button>        </ion-item-options>      </ion-item-sliding>    </ion-list>  </div>  <ion-fab right bottom>    <button ion-fab color="primary">      <ion-icon name="menu"></ion-icon>    </button>    <ion-fab-list side="top">      <button ion-fab (click)="additem()">        <ion-icon name="add"></ion-icon>      </button>      <button ion-fab>        <ion-icon name="search"></ion-icon>      </button>      <button ion-fab>        <ion-icon name="list"></ion-icon>      </button>    </ion-fab-list>  </ion-fab></ion-content>

2.

import { Component, ViewChild, ElementRef  } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';/** * Generated class for the LzhrmsPersonnelPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */@IonicPage()@Component({  selector: 'page-lzhrms-personnel',  templateUrl: 'lzhrms-personnel.html',})export class LzhrmsPersonnelPage {  @ViewChild('headBgColor')  headBgColorDiv:ElementRef;  @ViewChild('lyScroll')  lyScrollDiv:ElementRef;  @ViewChild('headerNavHidden')  headerNavHidDiv:ElementRef;  items = [    {      title: 'item1'    }  ];  constructor(public navCtrl: NavController, public navParams: NavParams,public  elementRef: ElementRef) {  }    //等待頁面載入完成之後在載入  ionViewDidLoad() {    this.headerChangeColorAndHidHeader();  }  additem() {    this.items.push({ title: 'item' + (this.items.length + 1) });  }  deletitem(list, index) {    list.splice(index, 1);  }   // 改變顏色   public headerChangeColorAndHidHeader() {       let nowHeight=0,beforeHeight=0;    let displayDiv=this.headerNavHidDiv.nativeElement;    let HeadBgdiv= this.headBgColorDiv.nativeElement;    let scrollDiv = this.lyScrollDiv.nativeElement;    // 計算螢幕的高    let screenHeight=window.screen.height;    var nowOpacity = 0;    scrollDiv.onscroll = function (event) {        //上滾顯示菜單導航        nowHeight = scrollDiv.scrollTop;        console.log(beforeHeight+"   "+nowHeight);        if(nowHeight<=beforeHeight){          displayDiv.style.visibility='visible';        }                //修改顏色        if (scrollDiv.scrollTop / 250  < 0.85) {          nowOpacity = this.scrollTop / 250;        }        HeadBgdiv.style.opacity = nowOpacity;        // 當滑動到一定程度隱藏頂部菜單        if(this.scrollTop/screenHeight>0.30 && (nowHeight>beforeHeight) ){          displayDiv.style.visibility='hidden';        }                   setTimeout(function(){beforeHeight=nowHeight;},0);              }  }}

3.

   ion-content{        overflow:scroll;      }    .headerNav{        background-color:transparent;        position: fixed;        z-index: 2;        width:100%;        height: 7vh;        visibility:visible;    }    .headerNav .headerHome{        padding:1vh;        width:20%;        height: inherit;        float:left;        color:white;        font-size:2.5rem;        text-align: center;    }    .headerNav .headerTitle{        padding:2vh;        width:60%;        height: inherit;        color: white;        font-size:1.5rem;        text-align: center;        float:left;    }    .headerNav .headerMenu{        padding:1vh;        width:20%;        height:inherit;        color:white;        font-size:2.5rem;        text-align: center;        float:right;    }    .headerNav #header_bg{        background-color: #4323d4;        opacity: 0;        height: inherit;        position: fixed;        width: 100%;            }

通過以上代碼就可以實現以上效果：

這裡我說一下我寫這個效果時出現的錯誤：

（1）position：fixed和position：absolute的區別：

         fixed：固定定位     absoulte：絕對位置

         在沒有捲軸的情況下沒有區別

          在有捲軸的情況下：fixed定位不會隨捲軸的一定而移動，absoulte會隨捲軸滾動而移動（一般fixed用在遮蓋層或固定在頁面摸個位置）

   （2）display：none和    visibility:hidden:

              這兩個都是用來隱藏一個div的實現效果一樣，

               display：none是直接隱藏且物理位置也消失，

               visibility:hidden是隱藏但物理位置還在，他所佔的空間還存在

    （3）setTimeout延時0毫秒的作用：

             正常情況下javascript都是按照順訊執行的，但是有時候需要等後面語句都執行完在執行本身，這時候就用setTimeout延時0來實現

            例如：

alert(1); setTimeout("alert(2)", 0); alert(3); <!-- 雖然延時了0ms,但是執行順序為：1，3，2  --><!-- 這樣就保證setTimeout裡面的語句在某一程式碼片段中最後執行。 -->

這裡是我的一些總結，希望對大家有一點協助，其次這裡有什麼需要完善的希望大家多多指教

查看評論