离子网格力排可见

问题描述 投票:1回答:1

我在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将突出显示的行滚动到视图中。

ionic-framework
1个回答
2
投票

我找到了解决方案。

在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()会尝试将行放在视口的底部,在我的情况下看起来好多了,因为它会导致滚动较少。

© www.soinside.com 2019 - 2024. All rights reserved.