ScrollTo 이온 2에있는 ListiVew의 특정 항목

목록 2의 특정 항목을 이온 2로 스크롤하고 싶습니다. 배열에 바인딩 된 목록보기가 있습니다.ScrollTo 이온 2에있는 ListiVew의 특정 항목

<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은 즉 위치 위쪽 및 왼쪽 아니라 요소 자체를 지원하는 것을 볼 : 여기

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

뷰입니다. 어떻게 scrollTo 목록보기 항목 (예 : 항목 번호 150) 자체? 항목 번호 150의 위치를 가져 와서 scrollTo에 전달할 수 있습니까?

당신은 [id]="'item' + item.index" 같은 작업을 수행하여 (각 항목에 ID를 할당하고 다음 코드에서 바로 얻을 해당 ID를 사용할 수 있습니다

출처

2016-12-27 DotNet Dreamer

나도 몰라 : 내가 목록보기로드까지 기다렸다 난 그냥 제 2 지연 후이 함수를 호출 마지막

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

. 현재 docs를보고있는 순간에는 approxItemHeight와 항목의 인덱스를 사용하여 위치를 계산하고 'ionContent.scrollTo (0, approxItemHeight * index);를 사용하여 위치를 계산할 수 있지만 "scrollToItem"은 없습니다. 머리글이나 바닥 글도 높이를 계산하는 것을 잊지 말고 계산에 추가하십시오. – Patrick

. 먼저이 GI 필요 (완벽하게 구현 here 확인) 각리스트 뷰 항목에 고유 ID 적이하고 그 후 ListView

@ViewChild(VirtualScroll) listView: VirtualScroll;

난 (다음) 함수 (동적 내가 변화되었을 때 버퍼 비)도 스크롤 한리스트 뷰의 크기를 조절하는 제한을 가지고 ScrollTo 생성 선택 . 당신이 이것을 해결하는 경우

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

출처

2017-09-08 11:17:08

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

ScrollTo 이온 2에있는 ListiVew의 특정 항목

답변

관련 문제