分页记录很少时向上滚动

Question

我在我的angular 6应用程序中使用bootstrap的ngb分页，现在的情况是，当我们有12条来自API的记录进入时，由于将页面大小设置为10，因此ngb分页显示了前10条记录。一切正常，但是当用户单击寻呼机的第二页时，它将页面移动到只有两个记录的位置，但是用户必须向上滚动才能看到这些记录。因此，用户要求在上述情况下，只要记录很少，就必须自动向上滚动。

 <ngb-pagination [collectionSize]="pager.totalCount" [page]="pager.pageNumber" (pageChange)=" getMyOrders($event)"
                  [maxSize]="3" [ellipses]="false" [rotate]="true"></ngb-pagination>

Answer 1

必须存在引起此问题的某些设计/ CSS，我尝试但无法复制您报告的问题...

相关的 HTML ：

<div>
    <ul>
        <li *ngFor="let i of currentList"> {{ i }} </li>
    </ul>

    <ngb-pagination class="d-flex justify-content-center" [collectionSize]="numPages * 10" [(page)]="page" aria-label="Default pagination"
     (pageChange)="loadNext()"> </ngb-pagination>
</div>

相关的 TS ：

export class AppComponent implements OnInit {
  name = 'Angular 6';
  page = 1;
  setSize = 10;

  someList = ['item1', 'item2', 'litem', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10',
    'item11', 'item12', 'item13'];

  numPages = this.someList.length / 10;
  currentList = this.someList.slice(0, 10);

  ngOnInit() {}

  loadNext = () => {
    const pointer = (this.page - 1) * this.setSize;
    const endPointer = pointer + 10;
    this.currentList = this.someList.slice(pointer, endPointer);
  }

}

工作stackblitz here