Question

我正在处理一个新的Ionic 4项目，并列出了晶圆厂列表。该列表工作正常，但我想默认将其打开。

我已经在这里阅读了一些内容，但是代码不适用于Ionic 4。

有人可以告诉我解决方案吗？谢谢！

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="start" slot="fixed" #fab >
    <ion-fab-button>
      <ion-icon name="arrow-dropup-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">

        <ion-fab-button>
            <ion-icon name="navigate"  (click) ="this.startNavigation()" ></ion-icon>
          </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-down" (click) ="this.doRating('-1')"></ion-icon>
    </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-up" (click) ="this.doRating('1')"></ion-icon>
    </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

page.ts文件如下：

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('IonFabList',{static: false}) fab: IonFabList;

  constructor() {}

  ionViewDidEnter()
  {
    this.fab.toggleList();
  }

}

Answer 1

您需要在activated元素上设置ion-fab属性。

<ion-fab vertical="bottom" horizontal="start" slot="fixed" activated="true" #fab >
</ion-fab>

看看ion-fab docs

默认打开Ionic 4 Fab列表

1 个答案: