如何在ionic 3中进行垂直滚动

Question

我正在开发一个电子学习应用程序，并且正在设计一个测试页面。我的问题导航如下图所示。单个测试中有20-30个问题，我想在问题导航中以及用户尝试时进行垂直滚动问题8，它将自动显示8个问题的下一张幻灯片（9-16）。

.ts代码

public question = [
{ id: 1 },{ id: 2 },{id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },
{ id: 7 },{ id: 8 },{ id: 9 },{ id: 10 },{ id: 11 },{ id: 12 },
{ id: 13 }, { id: 14 },{ id: 15 },{ id: 16 },{ id: 17 },{ id: 18 }]

.html代码

   <ion-row nowrap class="headerChip">
    <div *ngFor="let item of question; let idx = index" >
    <ion-chip  (click)="changeData(item.id)" style="width: 38px">
    <ion-label >{{item.id}}</ion-label>
    <div></div>
    </ion-chip>
    </div>
  </ion-row>

.css代码

.chip-md {
border-radius: 19px;
height: 38px;
width: 38 px;
font-size: 13px;
line-height: 38px;
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.12);
margin: 2px 4px;}


.chip-md > ion-label {
        margin: 0 10px 0px 15px;
    }