滚动到Ionic 2中ListiVew的特定项目 [英] ScrollTo particular item of ListiVew in Ionic 2

问题描述

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

I want to scrollTo a particular item in listview in ionic 2. I have a listview which is bound to array.

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）本身？我怎样才能获得项目编号的位置并将其传递给scrollTo？

I see that scrollTo only support position i.e top and left but not the element itself. How can i scrollTo listview item (e. item no 150) itself ? How can i get the position of item no 150 and pass it to scrollTo?

推荐答案

我是发布我提出的解决方案。首先，您需要为每个listview项目提供唯一ID，然后选择 ListView

I am posting the solution i come up with. First you need to give unique id to each listview item and then select the ListView

@ViewChild(VirtualScroll) listView: VirtualScroll;

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

After that i created a function (following) ScrollTo which has a timeout of resizing the listview after scrolling too (as i was changing buffer ratio dynamically).

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);
}

最后我在第二次延迟后调用此函数，因为我等到列表视图加载：

Last i just called this function after a second delay as i waited till listview loads:

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

这篇关于滚动到Ionic 2中ListiVew的特定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！