angular – ScrollTo在Ionic 2中的ListiVew特定项目

发布时间：2020-12-17 08:47:55 所属栏目：安全来源：网络整理

导读：我想滚动到离子2中列表视图中的特定项目.我有一个绑定到数组的列表视图. export class TestPage { @ViewChild(Content) content: Content; public items: ArrayObject = []; ionViewWillEnter() { console.log(this.navParams.data); this.customService.get

我想滚动到离子2中列表视图中的特定项目.我有一个绑定到数组的列表视图.

export class TestPage {
    @ViewChild(Content) content: Content;
    public items: Array<Object> = [];

    ionViewWillEnter() {
        console.log(this.navParams.data);
        this.customService.getArray(this.params.index).then((items) => {
            this.items = items;
                //scroll to item
                // this.content.scrollTo()
        });
     }
}

以下是观点：

<ion-list [virtualScroll]="items" approxItemHeight="120px" approxItemWidth="100%" 
    class="items-listview list list-md">
  <button class="items-listview-item item item-md" *virtualItem="let item">
    <div class="items-listview-text">
        {{ item.text }}<span>{{item.index}}</span>
    </div>
  </button>
</ion-list>

我看到scrollTo只支持位置,即顶部和左侧,但不支持元素本身.如何滚动列表视图项目(例如项目编号150)本身？如何获得150号项目的位置并将其传递给scrollTo？

您可以为每个项目分配一个ID(通过执行类似[id] =“’item’item.index的操作),然后在您的代码中使用该ID来获取offsetTop：

scrollTo(elementId:string) {
    let yOffset = document.getElementById(elementId).offsetTop;
    this.content.scrollTo(0,yOffset,4000)
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!