滾動到離子2中的特定項目LisdiVew

我想滾動到離子2中的listview中的特定項目。我有一個綁定到數組的listview。滾動到離子2中的特定項目LisdiVew

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）本身？我如何獲得item no 150的位置並將其傳遞給scrollTo？

來源

2016-12-27 DotNet Dreamer

我不知道，如果你解決了這個。在我看文檔的時候，沒有「scrollToItem」，儘管你可以使用你的approxItemHeight和item的索引來計算位置，並使用'ionContent.scrollTo（0，approxItemHeight * index）;'如果你有頁眉或頁腳不要忘記計算它們的高度，並將其添加到您的計算中 – Patrick

我張貼的解決方案，我想出了（查看完整的實現here）。首先，你需要GI已經唯一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);

來源

2017-09-08 11:17:08

您可以將ID分配給每個項目（通過執行類似[id]="'item' + item.index"，然後在你的代碼，只需使用該ID來獲得offsetTop：

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

來源

2016-12-27 05:09:10 sebaferreras

但我需要在ionViewWillEnter觸發時立即滾動。我目前沒有在視圖中 –

您可以使用'ionViewDidLoad'來確保內容已經被加載，並獲得像上面代碼中所做的'offsetTop'。因此，不要創建一個新方法，只需將該代碼放入'ionViewDidLoad'生命週期事件中即可。 – sebaferreras

聽起來不錯。將嘗試這個 –

目前接受的答案只有滾動相對於父元素，所以這裏是我想出了滾動到選定的元素（不遍歷DOM）。

scrollTo(element:string) { 
    let elem = document.getElementById(element); 
    var box = elem.getBoundingClientRect(); 

    var body = document.body; 
    var docEl = document.documentElement; 

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; 
    var clientTop = docEl.clientTop || body.clientTop || 0; 
    var top = box.top + scrollTop - clientTop; 
    var cDim = this.content.getContentDimensions(); 

    var scrollOffset = Math.round(top) + cDim.scrollTop - cDim.contentTop; 

    this.content.scrollTo(0, scrollOffset, 500); 
    }

來源

2017-06-01 19:33:35 jonesy827

謝謝，它的工作，只有有一些小的位置計算錯誤，如果頁面有一個頭，在我的情況。 – fifth

滾動到離子2中的特定項目LisdiVew

回答

相關問題