滚动到Ionic 2中ListiVew的特定项目

Question

我想滚动到离子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？

Answer 1

您可以为每个项目分配一个ID（通过执行类似的操作[id]="'item' + item.index"，然后在代码中使用该ID即可获取offsetTop：

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

Answer 2

我正在发布我想出的解决方案。首先，您需要为每个列表视图项目提供唯一的 id，然后选择ListView

@ViewChild(VirtualScroll) listView: VirtualScroll;

之后，我创建了一个函数（如下）ScrollTo，该函数在滚动后也有调整列表视图大小的超时（因为我正在动态更改缓冲区比率）。

private scrollTo(index: number) {
    let key = '#customIds_' + index;

    let hElement: HTMLElement = this.content._elementRef.nativeElement;
    let element = hElement.querySelector(key);
    element.scrollIntoView();

    //wait till scroll animation completes
    setTimeout(() => {
        //resize it! otherwise will not update the bufferRatio
        this.listView.resize();
    },500);
}

最后，当我等待列表视图加载时，我在第二次延迟后调用了这个函数：

//must be delay otherwise content scroll doesn't go to element properly..magic!
setTimeout(() => {
    this.scrollTo('someId');
}, 1000);