Question

我最近想知道为什么不能通过在ionScroll.subscribe（）中修改[[ngModel）] 来更改ionic v3中的活动片段。我的细分内容彼此堆叠在一起。因此，我将按钮用于“锚定滚动”，并希望当滚动位置超过特定位置时使它们显示虎钳。这是我的代码：

<ion-segment [(ngModel)]="segData"> <ion-segment-button (click)="this.scrollToCard('card1')" value="seg1">Card1</ion-segment-button> <ion-segment-button (click)="this.scrollToCard('card2')" value="seg2">Card2</ion-segment-button> </ion-segment> <div [ngSwitch]="segData"> <ion-list *ngSwitchCase="'seg1'"> <ion-item> <ion-card #card1>...</ion-card> </ion-item> <ion-item> <ion-card #card2>...</ion-card> </ion-item> </ion-list> </div>

example.ts

segData: string; export class ShowCar { @ViewChild(Content) content : Content; ... constructor(...) { this.segData = "seg1"; } ... ionViewDidLoad() { //This would work //setTimeout( () => { this.segData = "seg2"; } //Inside ionScroll.subscribe() it is not working //Even if i wrap this into "setTimeout" this.content.ionScroll.subscribe( scrollData => { if( scrollData.scrollTop > seg1PosFromTop) this.segData = "seg2"; }); } ... }

我尝试了很多事情，并且可能会发生一些疯狂的事情。例如，由于最新的angular允许直接从DOM处理元素，因此我在元素上触发了click事件。然后该段不久就显示为活动状态，并且在一毫秒后，上一个段再次变为活动状态。我也只是在改变CSS类。但是，当单击细分按钮时，我必须捕获它，删除所有segment-button segment-active类并将其手动添加到所选的类中。

Answer 1

好的，因为没有人回答我的问题，所以我花了很多时间尝试和研究。解决方法：

出于性能方面的考虑，离子应用程序中的每个滚动移动都恰好在角度外部之外。因此，不能修改角度变量或在任何滚动事件处理程序（content.resize()，ionScroll，ionScrollStart）中执行ionScrollEnd。

因此，您必须将每个代码包装到：this.zone.run()

import { Component, NgZone } from '@angular/core';
@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title></ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content (ionScroll)="scrollHandler($event)">
       <p> Some realllllllly long content </p>
    </ion-content>
`})
class E2EPage {
 public scrollAmount = 0;
 constructor( public zone: NgZone){}
 scrollHandler(event) {
   console.log(`ScrollEvent: ${event}`)
   this.zone.run(()=>{
     // since scrollAmount is data-binded,
     // the update needs to happen in zone
     this.scrollAmount++
   })
 }
}

https://ionicframework.com/docs/api/components/content/Content/#advanced

Answer 2

这是ionic4的完整解决方案：

// tab.page.html

<ion-header  >
 <!-- Scrollable Segment -->
 <ion-toolbar class="less-height" color="primary">
    <ion-segment scrollable mode="md" (ionChange)="segmentChanged(segment)" [(ngModel)]="segment" >
        <ion-segment-button mode="md" id="seg-1" value="0">
          <p>Description</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-2" value="1">
          <p>Interconnections</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-3" value="2">
          <p>Declensions</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-4" value="3">
          <p>Phraseologisms</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-5" value="4">
          <p>Etymology</p>
        </ion-segment-button>
        <ion-segment-button mode="md" id="seg-6" value="5">
          <p>Analysis</p>
        </ion-segment-button>
      </ion-segment>
</ion-toolbar>
</ion-header>

<ion-content>
    <ion-slides (ionSlideDidChange)="slideChanged()" class="word-slides">
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 2</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 3</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 4</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 5</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 6</p>
        </ion-slide>
      </ion-slides>
</ion-content>

// tab.page.ts

 @ViewChild(IonSlides) slider: IonSlides;
  segment = 0;
  constructor() {}
async segmentChanged(event) {
  await this.slider.slideTo(this.segment);
  this.slider.update();
}
async slideChanged() {
  this.segment = await this.slider.getActiveIndex();
  this.focusSegment(this.segment+1);
}

focusSegment(segmentId) {
  document.getElementById('seg-'+segmentId).scrollIntoView({ 
    behavior: 'smooth',
    block: 'center',
    inline: 'center'
  });
}

Ionic v3细分-滚动时更改活动细分

2 个答案: