您好,在上面的列表项中有一个按钮。单击此按钮,我将显示此项目下方的列表项。打开高级按钮以显示以下项目后,我已经添加了滚动到底部的代码,但这似乎不起作用。
<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();
}
---
答案 0 :(得分:1)
有时,离子事件在事件循环计划中丢失。最简单的方法是使用setTimeout(即使有点难看)。试试这个:
toggleAccordion() {
this.booleanAccordion = !this.booleanAccordion;
setTimeout(() => this.content.scrollToBottom(), 100);
}
您也可以使用ngZone,但这在这里可能有点过分。