Как выполнить автоматическую прокрутку списка в Angular6? - PullRequest
Новая
       24

Как выполнить автоматическую прокрутку списка в Angular6?

0 голосов
/ 28 февраля 2019

Привет, я пытался реализовать автоматическую прокрутку при инициализации страницы, но я не получил решение, есть ли какой-нибудь метод сборки в Angular?

Я пытался 

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  keyframes
} from '@angular/animations';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('popOverState', [
      state('show', style({
        opacity: 1
      })),
      state('hide',   style({
        opacity: 0
      })),
      transition('* => movedown',
          animate('2000ms', keyframes([
            style({top: '0%'}),
            style({top: '100%'}),
          ])
        )),
      transition('* => moveup',
          animate('2000ms', keyframes([
            style({top: '100%'}),
            style({top: '0%'}),
          ])
        )),
      transition('show => hide', animate('600ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))
    ])
  ]
})
export class AppComponent {
  title = 'my-app';
  switchOne = 'one';
  user = {
    detail: 'name'
  }
  items = [1,2,3,4,5,6,7,8,9,10,11,212,121,121,12,12,12,12,12,12,12,12,1,21,2,12,12,1,21,21,2,1,21,2,12,1,21,2,12,1,21,2,1,2,1323221,3,23,2,32,3,2,32,3,2,3];
  show = false;
  scroll = false;

  get stateName() {
    return this.show ? 'show' : 'hide'
  }

  get moveName() {
    return this.scroll ? 'movedown' : 'moveup';
  }
  toggle() {
    this.show = !this.show;
  }
  move() {
    this.scroll = !this.scroll;
  }


}

Анимации moveup и moveown заставляют элемент двигаться вверх и вниз, но требуется автоматическая прокрутка.

  <li [@popOverState]="moveName" *ngFor="let item of items; index as i; trackBy: trackByFn">
    {{i}}
  </li>

Я хочу пункт прокрутки Любое решение?

1 Ответ

0 голосов
/ 28 февраля 2019

Решение: Для этого можно использовать scrollTo API.Насколько я знаю, нет готового решения, предоставляемого угловыми анимациями .

Как: Чтобы получить правильные координаты, вам необходимо вычислить высотуодного элемента (используйте - getBoundingClientRect API).

Преимущество перед angular-animateion: Это решение, которое наверняка работает, а также довольно свободно и мощно, потому чтоего родной поддержки браузера.

...