Question

我在ion-grid里面有一个简单的ion-scroll，里面有大约12行。

<ion-scroll style="height: 30vh;" scrollY="true">
  <ion-grid>
    <ion-row *ngFor="let item of allItems; let si = index" [style.background-color]="si === selectedRow ? '#cccccc' : ''">
      <ion-col col-2>{{item.text}}</ion-col>
    </ion-row>
  </ion-grid>
</ion-scroll>

我有一些带有回调的按钮设置selectedRow。通过数据绑定的魔力，当我点击一个按钮时，右侧的行会突出显示（yay）。

我想要的是强制ion-scroll将突出显示的行滚动到视图中。

Answer 1

我找到了解决方案。

在html模板中，为行提供一个id：

<div ion-row *ngFor="let row of all_data_rows; let idx= index" id="{{'row_' + idx}}">

然后在.ts中，我以编程方式设置我想要显示的行：

let row = document.getElementById("row_" + this.selectedRow)
row.scrollIntoView()

它确保所选行位于滚动视口的顶部，这可能比我想要的滚动更多，但它可以工作。将false传递给scrollIntoView()会尝试将行放在视口的底部，在我的情况下看起来好多了，因为它会导致滚动较少。

离子网格力排可见

1 个答案: