Ionic3，裝飾器（@Input、@ViewChild）以及使用 Events 實現數據回調中的相關用法（五）

 

標題欄的漸變效果

　　使用到的相關裝飾器、Class以及相關方法：@Input、@ViewChild、Content、ionViewDidLoad

　　① @Input 裝飾器：用來獲取頁面元素自定義屬性值。

　　　　

<app-header search-show="false" title="發現"></app-header> 

在頁面 finder.html 頁面中，通過調用的控件，並且定義了兩個屬性 search-show、title； 

　title : String = '';//默認標題

@Input("search-show")
  set setDefaultSearchStatus(value:boolean){
    
  }
  @Input("title")
  set setTitle(value:String){
    this.title = value;
  }
在組件關聯的 .ts 頁面中，通過使用 @Input 裝飾器，並且實現其 set 方法，完成對 title 的賦值。

　　　　通過使用 {{title}}，完成對頁面數據的綁定

　　　　

 

 　　②通過 @Viewchild 和引用 Content 實現對 scroll 監聽，Events 的訂閱者模式完成數據的回調

 　　　　在 finder.js 中，重載 ionViewDidLoad 方法

import { IonicPage, Content, Events} from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
@IonicPage()
@Component({
    templateUrl:'./finder.html',
    styles:['./finder.scss']
})

export class FinderPage{
    constructor(private events:Events){

    }
// 頁面監聽
@ViewChild(Content)content : Content;
ionViewDidLoad(){
    this.content.ionScroll.subscribe(($event:any)=>{
        this.events.publish("finder_scroll_status",[$event.scrollTop]);//finder_scroll_status 用於回調接收

}) }

　　　　在 app-header.ts 中通過 Events 完成接收：

 constructor(private events:Events,private ngzone :NgZone){
    // 獲取【發現】頁面中 scroll 監聽數據
    // ngzone 用來進行頁面重構
    this.events.subscribe('finder_scroll_status',(params)=>{// subscribe 訂閱者模式，完成就收回調數據

      
    })
  }

 

 　　③漸變效果的實現：通過回調得到的頁面 scroll 的移動位置，計算標題的 opacity 元素屬性，通過改變 opacity 來實現漸變效果。因為要動態的改變頁面樣式，所以還需要引用 ngZone 服務，用來及時的更新頁面

 　　　　app-header.ts完整代碼：

import { Component, Input, ViewChild, NgZone } from '@angular/core';
import { IonicPage, Events } from '../../../node_modules/ionic-angular';

@IonicPage()
@Component({
  selector: 'app-header',
  templateUrl: 'app-header.html',
  styles:['./app-header.scss']
})
export class AppHeaderComponent {

  title : String = '';//默認標題
  private search_nav_height = 0;//搜索框高度
  private normal_title_nav = {//普通的標題欄
    opacity:0,
    opacityChild:0
  };
  private normal_search_nav = {//普通的搜索欄
    opacity:1
  };
  @Input("search-show")
  set setDefaultSearchStatus(value:boolean){
    
  }
  @Input("title")
  set setTitle(value:String){
    this.title = value;
  }
  @ViewChild('normalSearchNav') normal_search_el;//獲取頁面普通搜索框
  @ViewChild('normalTitleNav') normal_title_el;//普通的 title

  constructor(private events:Events,private ngzone :NgZone){
    // 獲取【發現】頁面中 scroll 監聽數據
    // ngzone 用來進行頁面重構
    this.events.subscribe('finder_scroll_status',(params)=>{
      if(this.normal_search_el && this.normal_search_el.nativeElement.offsetHeight>0){
        this.search_nav_height = this.normal_search_el.nativeElement.offsetHeight;
      }
      this.ngzone.run(()=>{
        if(this.search_nav_height >= params[0] ){//掩藏標題欄 || 顯示search
          if(this.normal_search_nav.opacity >= 0){
            this.normal_search_nav.opacity = 1 - (params[0]/this.search_nav_height);
            this.normal_search_el.nativeElement.style.display = '';

            this.normal_title_nav.opacity = (params[0]/this.search_nav_height);
            this.normal_title_nav.opacityChild = 0;
          }
        }
        if(this.search_nav_height < params[0]){//掩藏搜索欄 || 顯示title
          this.normal_search_nav.opacity = 0;
          this.normal_title_nav.opacity = 1;
          this.normal_search_el.nativeElement.style.display = 'none';

          if(params[0]-this.search_nav_height >= this.search_nav_height/3){//子元素的一個延時顯示
            this.normal_title_nav.opacityChild = 1;
          }
          
        }
        
      })
    })
  }

    

}

　　　　app-header.html完整代碼：

<!-- Generated template for the AppHeaderComponent component -->
<ion-grid class="app-grid-header" no-padding>
    <ion-row  class="margin-6 zindex-999" no-padding #normalSearchNav>
      <ion-col col-10>
          <ion-input no-padding [style.opacity]="normal_search_nav.opacity" class="bg-white border-r-4 bg-search" type="text" placeholder="得到搜索"></ion-input>
      </ion-col>
      <ion-col col-2>
        <i class="i-png-down i-png"></i>
      </ion-col>
    </ion-row>
    <ion-row class="bg-white absolute width" [style.opacity]="normal_title_nav.opacity" padding #normalTitleNav>
      <ion-col [style.opacity]="normal_title_nav.opacityChild" col-2>
        <i class="btn-search i-png"></i>
      </ion-col>
      <ion-col [style.opacity]="normal_title_nav.opacityChild" col-8>
        <span class="span-center text-center font-w-6 font-middle">{{title}}</span>
      </ion-col>
      <ion-col [style.opacity]="normal_title_nav.opacityChild" col-2>
        <i class="btn-down i-png"></i>
      </ion-col>
    </ion-row>
  </ion-grid>
  

 

 先這樣吧~