Question

我有一个奇怪的问题，两个页面具有相同的内容。我有一个包含Ionic2-Calendar的列表，然后是一些包含日历“事件”的动态项目（不是Ionic2-Calendar事件列表）。

---------------------------------------
CALENDAR
Day 1
Day n
---------------------------------------
Dynamic item 1
...
Dynamic item n
---------------------------------------

我们的想法是，当您点击日历上有活动的日期时，应用会滚动到当天的第一个活动。这很有效。

这是我滚动的方式。我将事件的Id（从服务器返回）分配给离子项。

<ion-item class="dataView" *ngFor="let result of json.Events" [id]="result.Id" (click)="editClass(result)">

这是我的意思：

export class CalendartestPage {

@ViewChild(Content) contentDetails: Content;

...

// Here we detect the click on the calendar and then,
// if there's events we do the scroll
onTimeSelected(ev) {
  if ( ev.events.length > 0 ) {
// Here we get the Id of the event
    this.scrollToEvent( ev.events[0].event_id );
  }
}

// Here we do the scroll to the content element, I repeat, this works
scrollToEvent(event) {
    let yOffset = document.getElementById( event ).offsetTop;
    console.error("\t\t\tscrollToEvent details --> "+ yOffset );
    this.contentDetails.scrollTo(0, yOffset, 1500);
  }

...

}

好的，问题出在哪里？此应用使用标签。这两个页面中的一个位于其中一个选项卡中，另一个位于模态中。

如果我先打开模态，则scrollTo可以正常工作。但是，如果我先进入选项卡页面（此处为scrollTo工作），然后再转到模态页面，则scrollTo不会滚动到该项目。我不知道为什么，但所选元素的 offsetTop 的值为0，因此app会滚动到顶部，这只会在您首先转到选项卡页面时发生。

您认为我怎么能解决这个问题？也许当它失去焦点时我必须删除标签页的某些内容？

离子内容scrollTo奇怪的行为

0 个答案: