IONIC Scroll to div

问题:

New to IONIC.

So I display a load of dates, but when the page is displayed I want to scroll to TODAY.

Now sure how I can do this? I do have a flag on the model that tells if it is today, if that helps? (ie 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>

//TypeScript

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

Thank you in advance.

回答1:

Here you go. I cut and pasted relevant sections of an old app.

You'd have to do your calculations to set 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 is the class for <ion-content> markup tag.

回答2:

You can use scrollIntoView function:

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

But this way have some UX issues. Please considering to use it or write your own scroll function for best UX.