IONIC滚动到div [英] IONIC Scroll to div

问题描述

IONIC新手。

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

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

现在确定我该怎么做？
我的模型上有一个标志，告诉它是否是今天，如果有帮助的话？
（即day.IsToday）

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

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

提前谢谢。

推荐答案

您可以使用 scrollIntoView 功能：

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.

这篇关于IONIC滚动到div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！