Как я могу использовать контент.scrollTo () для ion-прокрутки в ionic2?

Я пытаюсь прокрутить до фиксированной позиции, например scrollTo (500, 20). Допустим, вы находитесь на устройстве, которое имеет ширину 300 пикселей. Цель прокрутки теперь находится вне области экрана, вам нужно прокрутить вправо.

я решил это, сделав следующее:

<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>

до сих пор все в порядке. Проблема начинается, если я хочу перейти на 500 пикселей вправо, нажав кнопку, например. Пролистывание вправо работает. Я знаю, что есть функция, чтобы сделать это для <ion-content>:

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

это, к сожалению, не работает в моем случае. Я думаю, проблема в том, что контент связан с размером устройства, поэтому метод scrollTo() не влияет на <ion-scoll>. Как я могу использовать метод scrollTo () для <ion-scroll> вместо <ion-content>?

Спасибо за любую помощь!

14
angular ionic-framework ionic2 ionic3 typescript

4 ответов

как я могу использовать метод scrollTo () для <ion-scroll> вместо <ion-content>?

Я все еще работаю над тем, как анимировать прокрутки, но по крайней мере это можно рассматривать как решение для вашего сценария. Пожалуйста, взгляните на этот plunker.

так как мы не можем использоватьion-content для прокрутки я подумал о том, чтобы получить экземпляр прокрутки, затем получить доступ к внутреннему элементу прокрутки html, а затем использовать элемент.scrollLeft свойство для прокрутки этого элемента:

элемент.scrollLeft свойство получает или задает количество пикселей, которое содержимое элемента прокручивается влево.

Итак, в коде компонента:

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;
    }

}

и в вид:

<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>

делать this.scroll.scrollElement.scrollLeft = 500;, мы можем прокрутить содержимое ion-scroll 500px вправо. Затем мы можем вернуться к началу, сделав this.scroll.scrollElement.scrollLeft = 0;.

6

по прокрутке контента

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

по id #scroll

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

этот выше метод отлично работает для верхней нижней прокрутки, но в случае горизонтальной / scrollX не работает, поэтому ниже кода я разрешаю свое решение, возможно, надеюсь, что это будет полезно для вас.

машинопись

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>
6

чтобы добавить к ответам выше, это будет обрабатывать плавную прокрутку.

имя элемента прокрутки в вашем .HTML-код

<ion-scroll #scroll>

импорт свиток.

import { Scroll } from 'ionic-angular';

ссылка на скроллер в.ТС

@ViewChild('scroll') scroll: any;

добавить этот код, где это необходимо:

this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

надеюсь, что это кому-то поможет.

1

почему бы вам не получить размеры элемента, который вы хотите прокрутить в первую очередь? Назначьте идентификатор вашему ion-scroll в html-файле, затем вы можете используйте эту функцию:

scrollToElement(id) { 
    var el = document.getElementById(id);
    var rect = el.getBoundingClientRect();
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
    this.content.scrollTo(0, rect.top, 800);
}

С документация: Возвращаемое значение свойств getBoundingClientRect left, top, right, bottom, x, y, width, height, описывающих поле границы в пикселях. Свойства, отличные от ширины и высоты, относятся к верхней левой части область просмотра.

глядя на ваш код, я не думаю, что вам нужен ion-scroll, вы должны иметь возможность просто назначить идентификатор вашему div и получить желаемый результат.

0