Question

IONIC新手。

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

现在确定我该怎么做？我确实在模型上有一个标志，告诉它是否是今天，如果有帮助的话？（即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。请考虑使用它或编写自己的滚动功能以获得最佳用户体验。

IONIC滚动到div

2 个答案: