IONIC滾動到div

Question

IONIC的新成員。

所以我顯示一個日期的負載，但是當頁面顯示時我想滾動到TODAY。

現在確定我該怎麼做？ 模型上有一個標誌，告訴它是否是今天，如果有幫助？ （即day.IsToday）

<ion-item-group *ngFor="let day of allAppDays; let i = index;" > 


<ion-item-divider color="light"> {{day.Date | date : ' EEE d MMM yyyy' }}</ion-item-divider> 

     <button class="appbutton" ion-item *ngFor="let a of day.Appointments" (click)="goToApp(a)"> 
     <ion-grid> 
     <ion-row> 
      <ion-col col-3 [class]="getAppClass(a)"> 
      <p style="padding-top:6px;">{{a.Start|date:'h:mm a'}} <br />{{a.End|date:'h:mm a'}}</p> 
      <div class="vertline"></div> 
      </ion-col> 

      <ion-col> 
      <p class="font-sub pl10">{{a.ClientFirstName}} {{a.ClientLastName}}</p> 
      </ion-col> 
     </ion-row> 
     </ion-grid> 
     </button> 

    </ion-item-group> 

//打字稿

ngOnInit() { 

     this.getData(); 
     } 

     //Lets go and get data from the API 
     getData() { 

     this.getApps(false,() => { 
      this.loader.dismiss(); 
     }); 
     } 
getApps(cacheOnly = false, complete: any = null) { 
    this.apiService.getschedule(cacheOnly).subscribe((a: AppointmentDay[]) => { 
     this.allAppDays = a; 
     if (complete != null) { complete(); } 
    }, (err: any) => { 
     if (complete != null) { complete(); } 
    }); 
    } 

預先感謝您。

Answer 1

你在這裏。我剪切並粘貼了一箇舊應用程序的相關部分。

你必須做你的計算設置this.content.scrollTop

import { Component,ViewChild, Input, Output, EventEmitter} from '@angular/core'; 
import { Content } from 'ionic-angular'; 
@Component({ 
    selector: 'my-page', 
    templateUrl: 'myPage.html' 
}) 
export class MyPage {  
    @ViewChild(Content) 
    content:Content; 

    @Input("scrolling") 
    isScrolling: boolean; 

    @Output("scrolling") 
    scrollingOutput = new EventEmitter(); 

    ionViewDidLoad() :void { 
    this.content.ionScroll.subscribe((event) => { 
     this.isScrolling = true; 
     this.scrollingOutput.emit(true); 
     let scrollTop = this.content.scrollTop 
    }); 
    this.content.ionScrollEnd.subscribe((event) => { 
     this.isScrolling = false; 
     this.scrollingOutput.emit(false); 
    }); 
    } 

    get scrolling() { 
     return this.isScrolling; 
    } 
} 

Content爲<ion-content>標記標記的類。

Answer 2

可以使用scrollIntoView功能：

ionViewDidEnter(){ 
    let todayItem = document.getElementById('yourTodayItemId'); 
    todayItem.scrollIntoView(true); 
} 

但這種方式有一定的UX issues。請考慮使用它或編寫自己的滾動功能以獲得最佳用戶體驗。