离子 滚动到 div

Question

IONIC的新手。

所以我显示了很多日期，但是当页面显示时，我想滚动到今天。

现在确定我该怎么做？ 我在模型上确实有一个标志，可以告诉它是否是今天，如果有帮助？ (即日。是今天(

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

内容是标记标记<ion-content>类。

Answer 2

您可以使用scrollIntoView函数：

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

但是这种方式有一些用户体验问题。请考虑使用它或编写自己的滚动函数以获得最佳用户体验。