Question

我有一个页面，显示一个离子卡元素列表以及从火中读取的信息。每个元素将显示有关运动器材的信息，包括日期。

这些固定装置中的一些会在过去，而某些会在将来，但是当用户打开页面时，我希望页面自动打开，显示日期最近的离子卡。我希望这是有道理的-我不知道该怎么做！

 <ion-content>

      <ion-card *ngFor="let match of matches"  tappable 
 routerLink="/../match-details-standard/{{match.id}}">

         <ion-card-content>    
             <ion-grid >
                 <ion-row>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                     <ion-col class="team" col-3>{{match?.team}}</ion-col>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                  </ion-row>

                 <!-- matchNotPlayed: If the match has been played then I 
 don't want to show the day which it was played -->
                 <ion-row *ngIf="match?.homeScore != ''; else 
 matchNotPlayed">
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                     <ion-col col-3>{{match?.date.seconds * 1000 | date:'d 
 MMM yy' }}</ion-col>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                 </ion-row>
                 <ng-template #matchNotPlayed>
                     <ion-row> {{match?.date.seconds * 1000 | date:'EE d 
 MMM yy' }}</ion-row>
                 </ng-template> 
                 <!-- matchNotPlayed: End -->

                 <!-- noScoreReceived: If the match has been played and 
 scores updated then display scores else show 'v' between team names-->
                 <ion-row *ngIf="match?.homeScore != ''; else 
  noScoreReceived" border="solid">
                      <ion-col col-2>{{match?.home}}</ion-col>
                     <ion-col col-1 style="text-align: right"> 
 {{match?.homeScore}}</ion-col> 
                     <ion-col col-1> - </ion-col> 
                     <ion-col col-1 style="text-align: left"> 
 {{match?.awayScore}}</ion-col>
                     <ion-col col-2> {{match?.away}}</ion-col>
                  </ion-row>
                 <ng-template #noScoreReceived>
                     <ion-row>
                         <ion-col col-2>{{match?.home}}</ion-col> 
                         <ion-col col-1></ion-col>
                         <ion-col col-1> v </ion-col>
                         <ion-col col-1></ion-col>
                         <ion-col col-2> {{match?.away}}</ion-col>
                      </ion-row>
                  </ng-template> 
                 <!-- noScoreReceived -->

                 <ion-row> {{match?.date.seconds * 1000 | date:'h:mm a' }} 
 </ion-row>
              </ion-grid>    
          </ion-card-content>
     </ion-card>

  </ion-content>

Answer 1

您将需要弄清楚最新日期的离子卡在什么位置（协调）。您可以根据此卡在阵列中的位置以及显示该卡的高度来进行此操作。利用这些信息，您可以使用scrollToPoint

自动滚动到特定点

有关更多信息，请参见https://ionicframework.com/docs/api/content#scrollToPoint

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    var x, y
    // Calculate y
    this.content.scrollToPoint(x,y);
  }
}

Ionic 4-用户打开页面时根据日期自动滚动到特定部分

1 个答案: