ionic2+Angular 实现商品详情页顶部导航显示的明暗效果 ionScroll页面滑动监听

简述：实现商品详情页顶部导航显示的明暗效果。在页面顶部是不显示导航，随着滑动导航渐明。并且滑动到相应模块是导航的状态也随之变化，点击导航时页面滑动到指定位置。

第一：需要在组件中引入相关模块；

import { Component, NgZone, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, PopoverController, ModalController, Content } from 'ionic-angular';

 

第二：如果只是监听页面滑动，只需要标注@ViewChild(Content) content: Content;就可以了。

export class ProductPage { 
  @ViewChild(Content) content: Content;
    //括号中的值在html页面中标注的时候，名称不能其他属性相同。如该文件已经有一个pnavs的变量，则会报错。
    @ViewChild('pnavs') sticknavs;
    @ViewChild('evaluate') stickevaluate;
    @ViewChild('detail') stickdetail;
}

 

附加：如果要监听页面的某个元素，并对其进行操作的话，在html文件中如下标记即可：

<ion-header>
    <!--wechatHidden-->
    <ion-navbar wechatHidden>
        <ion-title>商品详情</ion-title>
    </ion-navbar>
    <ion-grid #pnavs class="product-navs" [style.opacity]="navsOpacity" [ngClass]="{activetop: isShowTopNavs}">
        <ion-row>
            <ion-col (click)="changeNavs(i,true)" [ngClass]="{active: isNavActive==i}" *ngFor="let nav of navs;let i=index">
                {{nav.title}}
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-header>

<ion-content>
<ion-list #evaluate class="product-evaluate">
            <ion-list-header>
                <ion-icon name="ribbon"></ion-icon>宝贝评价<span *ngIf="pInfo.evaluateTotalCount>0">({{pInfo.evaluateTotalCount}})</span></ion-list-header>
            
        </ion-list>

        <ion-list #detail class="product-imgs">
            <!--[ngClass]="{active: isNavActive==1}"-->
            <ion-list-header>
                <ion-icon name="images"></ion-icon>商品详情</ion-list-header>
           
        </ion-list>

</ion-content>

 第三：在组件加载完成的方法之内，对页面的滑动进行监听；

ionViewDidLoad() {
    this.content.ionScroll.subscribe(($event: any) => {
      this.ngzone.run(() => {//如果在页面滑动过程中对数据进行修改，页面是不会重构的。所以在对应的操作中需要使用如下方法，使页面能够重构。
        this.eve = $event;
        let top = $event.scrollTop;//当前滑动的距离
        this.navsOpacity = top * 0.005;//导航透明度渐变

        let navoffsettop = this.sticknavs.nativeElement.offsetTop;//当前元素距离顶部的距离。
        this.navs[0].anchor = navoffsettop;

        let evaluateoffsettop = this.stickevaluate.nativeElement.offsetTop;
        this.navs[1].anchor = evaluateoffsettop

        let detailoffsettop = this.stickdetail.nativeElement.offsetTop;
        this.navs[2].anchor = detailoffsettop

        if (top > 10) {
          this.isShowTopNavs = true;//是否显示导航
          if (top + 41 < evaluateoffsettop) {
            // 基本信息
            this.changeNavs(0);
          } else if (top + 41 >= evaluateoffsettop && top + 41 < detailoffsettop) {
            //宝贝评价
            this.changeNavs(1);
          } else if (top + 41 >= detailoffsettop) {
            // 商品详情
            this.changeNavs(2);
          }
        } else {
          this.isShowTopNavs = false;
        }
      });
    })
  }

  changeNavs(index: number, isClick?: boolean): void {
    this.isNavActive = index;
    if (isClick) {
      //跳转到指定的位置
     this.content.scrollTo(0,this.navs[index].anchor-40,1000);
    }
  }

补充：#标记的元素属性读取方式似乎与标记的元素有关（获取页面元素的方式Android系统和iOS系统不一样）

 

but:

谨记不要试图直接去操作页面元素，例如我改变页面某个元素的样式，其实可以通过其他方法达到同样的效果；