IONIC滚动到div

所以我显示一个日期的负载，但是当页面显示时我想滚动到TODAY。

现在确定我该怎么做？模型上有一个标志，告诉它是否是今天，如果有帮助？（即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(); } 
    }); 
    }

预先感谢您。

来源

2017-08-13 D-W

你在这里。我剪切并粘贴了一个旧应用程序的相关部分。

你必须做你的计算设置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>标记标记的类。

来源

2017-08-13 09:37:49 JGFMK

可以使用scrollIntoView功能：

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

但这种方式有一定的UX issues。请考虑使用它或编写自己的滚动功能以获得最佳用户体验。

来源

2017-08-14 03:37:05 Duannx

IONIC滚动到div

回答

相关问题