Ionic v3 Segment - изменение активного сегмента при прокрутке - PullRequest
Новая
       42

Ionic v3 Segment - изменение активного сегмента при прокрутке

0 голосов
/ 05 октября 2018

Мне недавно стало интересно, почему нельзя изменить активный сегмент в ionic v3, изменив [(ngModel)] в ionScroll.subscribe () .У меня есть содержимое сегмента, расположенное друг под другом.Поэтому я использую кнопки для «прокрутки привязки» и хочу, чтобы они отображались наоборот, когда моя позиция прокрутки находится над определенной позицией.Вот мой код: 

<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 и добавить его вручную к выбранному.

1 Ответ

0 голосов
/ 06 октября 2018

Хорошо, поскольку никто не ответил на мой вопрос, я потратил много времени, пытаясь и исследуя.Вот, пожалуйста, решение:

Каждое движение прокрутки в ионном приложении оказывается вне угла по соображениям производительности.Таким образом, нельзя изменить угловые переменные или сделать 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

...