无法在ionic 3中的按钮切换上滚动到底部

时间:2018-11-30 14:46:03

标签: ionic3

enter image description here

您好,在上面的列表项中有一个按钮。单击此按钮,我将显示此项目下方的列表项。打开高级按钮以显示以下项目后,我已经添加了滚动到底部的代码,但这似乎不起作用。

<ion-content>
.
.
.
<ion-list>
    <ion-item>
        <ion-row text-center>
            <ion-col>
              <button
              ion-button
              block icon-end
              (click)="toggleAccordion()"
                  >Advanced Search
                  <ion-icon name="arrow-down" [ngClass]="{'active': booleanAccordion}" ></ion-icon>
              </button>
            </ion-col>
        </ion-row>
    </ion-item>
</ion-list>
<ion-list *ngIf="booleanAccordion">
    <ion-item>
        <from-to-filter headerText="Table %"></from-to-filter>
    </ion-item>
</ion-list>
<ion-list *ngIf="booleanAccordion">
    <ion-item>
        <from-to-filter headerText="Depth %"></from-to-filter>
    </ion-item>
</ion-list>

import { Content } from 'ionic-angular';
@Component({
selector: 'page-search',
templateUrl: 'search.html',
})
export class SearchPage {
@ViewChild(Content) content: Content;
----
toggleAccordion() {
this.booleanAccordion = !this.booleanAccordion;
this.content.scrollToBottom();
}
---

1 个答案:

答案 0 :(得分:1)

有时,离子事件在事件循环计划中丢失。最简单的方法是使用setTimeout(即使有点难看)。试试这个:

toggleAccordion() {
   this.booleanAccordion = !this.booleanAccordion;
   setTimeout(() => this.content.scrollToBottom(), 100);
}

您也可以使用ngZone,但这在这里可能有点过分。