快速定位及反向定位

.html

<ion-header>
  <ion-toolbar color="primary" mode="ios">
      <ion-buttons slot="start">
          <ion-back-button mode="ios"></ion-back-button>
      </ion-buttons>
      <ion-title>
          快速定位
      </ion-title>
      <ion-buttons slot="end">
          <ion-button icon-only (click)="backHome()">
              <ion-icon name="home"></ion-icon>
          </ion-button>
      </ion-buttons>
  </ion-toolbar>

  <ion-slides #slider class="top_slides" pager="false" [options]="slideOpts">
    <ion-slide *ngFor="let slide of slides; let i = index;" (click)="changeCurrentTab(i)">
      <span [ngClass]="{'high-light': i == current_tab}"  class="slide-title-unit"> {{slide}} </span>
    </ion-slide>
  </ion-slides>

</ion-header>


<ion-content scrollEvents="true" (ionScrollEnd)="contentScroll($event)">
  <ion-card class="section_0">
    <ion-card-content>
      第一部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_1">
    <ion-card-content>
      第二部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_2">
    <ion-card-content>
      第三部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_3">
    <ion-card-content>
      第四部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_4">
    <ion-card-content>
      第五部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_5">
    <ion-card-content>
      第六部分
    </ion-card-content>
  </ion-card>
  <ion-card class="section_6">
    <ion-card-content>
      第七部分
    </ion-card-content>
  </ion-card>
</ion-content>

.ts

import { Component, OnInit, ElementRef,ViewChild} from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-fast-positioning',
  templateUrl: './fast-positioning.page.html',
  styleUrls: ['./fast-positioning.page.scss'],
})
export class FastPositioningPage implements OnInit {

  //反向快速定位解决方案
  // 页面滚动时动态更新TAB的高亮状态
  // 1.需要在constructor 中声明 private elementRef: ElementRef,
  // 2.把HTML模板中的每一个区块加上class="section_*"（不要用ID）
  // 3. ion-content 加属性 <ion-content scrollEvents="true" (ionScrollEnd)="contentScroll($event)">
  @ViewChild("slider", { static: false }) private slider;
  contentScroll(e) {
    let sections = this.elementRef.nativeElement.querySelectorAll(
      "[class^=section]"
    );
    const header_height = (this.elementRef.nativeElement.querySelector(
      "ion-header"
    ) as HTMLElement).offsetHeight;
    for (let index = 0; index < sections.length; index++) {
      if (sections[index].getBoundingClientRect().bottom >= header_height) {
        this.slider.slideTo(index);
        this.current_tab = index;
        break;
      }
    }
  }

  //快速定位
  public slides: any[] = [
    "第一部分",
    "第二部分",
    "第三部分",
    "第四部分",
    "第五部分",
    "第六部分",
    "第七部分",
  ];

  //默认显示第一个tab
  public current_tab: any = 0;

  //页面状态
  public pageType:string;

  constructor(
    public route: ActivatedRoute,
    private elementRef: ElementRef,
  ) {
    
  }

  ngOnInit() {
  }

  ionViewDidEnter(){
     //取值
     this.route.queryParams.subscribe((data) => {
      this.pageType = data.type;
    });
  }

  changeCurrentTab(index: any) {
    this.current_tab = index;
    this.scrollIntoView(index);
  }

  scrollIntoView(id: string) {
    let element = this.elementRef.nativeElement.querySelector(`.section_${id}`);
    if (element) {
      element.scrollIntoView();
    }
  }
}