angular - Cum pot folosi content.scrollTo() pentru ion-scroll în ionic2?

Încerc să derulez până la o poziție fixă, de exemplu scrollTo(500, 20). Să zicem că ești pe un dispozitiv care are o lățime de 300 de pixeli. Ținta de derulare este acum în afara ecranului, trebuie să derulezi spre dreapta.

Am rezolvat asta urmând pașii următori:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

Până aici totul este în regulă. Problema începe dacă vreau să sar 500 de pixeli spre dreapta apăsând un buton, de exemplu. Glisarea spre dreapta funcționează. Știu că există o funcție pentru a face acest lucru pentru <ion-content>:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500); 

Din păcate, acest lucru nu funcționează în cazul meu. Cred că problema este că conținutul este legat de mărimea dispozitivului, astfel încât metoda scrollTo() nu are efect pentru <ion-scroll>. Cum pot folosi metoda scrollTo() pentru <ion-scroll> în loc de <ion-content>?

Mulțumesc pentru orice ajutor!

Răspuns #1

Cum pot folosi metoda scrollTo() pentru <ion-scroll> în loc de <ion-content>?

Încă lucrez la modul de animare a derulării, dar cel puțin acest lucru poate fi considerat o soluție pentru scenariul tău. Te rog să arunci o privire la acest plunker.

Deoarece nu putem folosi ion-content pentru derulare, m-am gândit să obțin instanța Scroll, apoi să accesez elementul de derulare HTML intern și apoi să folosesc proprietatea element.scrollLeft pentru a derula pe acel element:

Proprietatea element.scrollLeft obține sau setează numărul de pixeli cu care conținutul unui element este derulat spre stânga.

Deci în codul componentului:

import { Component, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({...})
export class HomePage {
  @ViewChild('scroll') scroll: any;

    constructor() {}

    public backToStart(): void {
      this.scroll.scrollElement.scrollLeft = 0;
    }

    public scrollToRight(): void {
      this.scroll.scrollElement.scrollLeft = 500;
    }

}

Și în vedere:

<ion-content padding>
  <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
        <div  style="width:1000px;">
            <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid violet;"></div>
        </div>
    </ion-scroll>

    <button (click)="backToStart()" ion-button text-only>Go to start</button>
    <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
</ion-content>

Prin efectuarea this.scroll.scrollElement.scrollLeft=500;, putem derula conținutul lui ion-scroll cu 500px către dreapta. Putem apoi să ne întoarcem la început făcând this.scroll.scrollElement.scrollLeft=0;.

Răspunsul #2

Prin derularea conținutului

@ViewChild(Content) content: Content;
  this.content.scrollTo 

Prin id #scroll

@ViewChild('scroll') scroll: any;  
this.scroll.scrollElement.scrollLeft = 500;

Metoda de mai sus funcționează bine pentru derularea sus-jos, dar în cazul derulării orizontale/scrollX nu funcționează, așa că prin codul de mai jos am rezolvat soluția mea. Sper că vă va fi de folos.

TypeScript

scrollmain(elementId, index) {
   console.info('elementId', elementId)
   var el = document.getElementById(elementId);
   el.scrollIntoView({ behavior: "smooth" });
}

HTML

<ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
          nowrap; height: 60px">
    <ion-segment *ngIf="mcqdata" color="appmaincolor">
        <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
            [ngClass]="{'active': selectedIdx == i}">
            <strong>Queastion{{i+1}}</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>