Question

嗨，我试图在页面init上实现自动滚动，但是我没有得到解决方案，Angular的build方法中有任何方法吗？

我尝试过

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


}

上移和下移动画使元素上下移动，但需要自动滚动。

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

我要滚动项目任何解决方案？

Answer 1

解决方案：您可以使用scrollTo API来实现此目的。据我所知，角度动画没有提供开箱即用的解决方案。

方法：要获取正确的坐标，您需要计算一个元素的高度（使用-getBoundingClientRect API）。

在角度动画方面的优势：这是一个可以正常工作的解决方案，并且由于其对本机浏览器的支持而非常流畅和强大。

如何在Angular6中执行自动滚动列表？

1 个答案: