Question

我有一个包含一些卡片的div。有时，卡片数量超出了窗口显示的数量。在这种情况下，我希望单击时具有向左和向右按钮以向左/向右滚动一张卡片。我不想显示水平滚动条。

ax.set_zorder(2)
ax2.set_zorder(1)
ax.patch.set_visible(False)

<div class=lane>
    <span class='arrow-left' (click)="scrollOneCardLeft()">left</span>
    <span class='arrow-right' (click)="scrollOneCardRight()">right</span>
    <div  class=card-cont *ngFor="let card of myCards; let i = index">
       <div class="card"></div>
    </div>  
</div>

我应该如何在Angular组件上实现scrollOneCardLeft（）和scrollOneCardRight（），以便在单击时滚动一个项目？

Answer 1

我遇到了同样的问题，在其他帖子的帮助下，我结束了这两种方法。

  scrollLeft(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft -= (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

  scrollRight(el: Element) {
    const animTimeMs = 400;
    const pixelsToMove = 315;
    const stepArray = [0.001, 0.021, 0.136, 0.341, 0.341, 0.136, 0.021, 0.001];
    interval(animTimeMs / 8)
      .pipe(
        takeWhile(value => value < 8),
        tap(value => el.scrollLeft += (pixelsToMove * stepArray[value])),
      )
      .subscribe();
  }

他们使用反应性操作逐渐改变滚动条的左侧位置。
也许尝试弄乱数字，这种方法符合我的需要，可以进行一些调整以适应您的需求。

您可以通过传递列表的引用（具有水平滚动的容器）来通过(click)事件调用'em'

  <div class="horizontal-scroll" #list>...</div>
  <button (click)="scrollLeft(list)">Left</button>

侧面滚动角度单击按钮

1 个答案: