Question

在Angular 7项目中，我有一个带有产品列表的页面。上面有一个“加载更多产品”按钮（有点延迟加载）。单击它，将请求发送到服务器，当响应到来时，它将被添加到当前产品列表中。问题是，我希望响应后页面会“保持原样”，这样我就可以看到上次浏览的产品并继续滚动。令我惊讶的是，它的工作原理与众不同，它停留在底部，因此在响应出现后，我看到页脚和“加载更多...”按钮。

我尝试将其滚动到加载新内容之前的最后位置，但是它不起作用。我使用了elemnet.scroll（x，y）方法，因为window.scrollTo（x，y）在我们的应用程序中坏了:) .a AHh初级工作：P。

//下面-函数witch在ProductListComponent中加载新内容

// this.scrollTop是在组件的其他部分计算的属性，我并不是为了不分散您的注意力。

getProductListById(...someArgs).pipe(
        tap(payload => {
          let newItems = [];
          newItems = this.productList;
          newItems.push(...this.filterList(payload.items));
          this.productList = [...newItems];
        }),
        finalize(() => {
          this.screenService.scrollTo.next(this.scrollTop);
        })
      );

// ScreenService //它是由于window.scrollTo（）方法损坏而创建的。它适用于所有其他情况，但在这里...

 public scrollTo: Subject<number> = new Subject();

// CoreComponent

ngOnInit(){    
this.screenService.scrollTo.pipe(takeUntil(this.unsubscribe)).subscribe(scrollTop => {
      this.scrollTo(scrollTop);
    });
}

  scrollTo(scrollTop: number) {
    if (!isNaN(scrollTop)) {
      this.scrollContainer.nativeElement.scroll(0, scrollTop);
    }
  }

如果有另一种方法可以将页面保留在原处并禁用此对齐行为，那么我不指望固定滚动，请告诉我。希望能提供一些建议。

Answer 1

这里的问题是您要重新填充产品列表的数组，这就是为什么页面始终停留在页脚中的原因我在项目中也实现了相同的操作，但是我将这些项目直接添加到原始列表中但未将所有内容都放入将列表项再次放入列表。

此处浏览器与元素保持某种绑定，因此添加列表中的所有项目使其始终位于底部。

尝试直接添加到原始列表中

这样

getProductListById(...someArgs).pipe(
        tap(payload => {
this.productList.push(...this.filterList(payload.items))})
      );

然后您可能不需要该服务也可以滚动。

在出现新的延迟加载内容后，滚动条将滚动到页面底部

1 个答案: