Question

我正在为IOS制作一个应用程序，其菜单上带有多个按钮。而且，我遇到了一个问题，第一次单击按钮时，调用了NavCtrl.push（）以显示该按钮的内容，它的效果很好，但是当我返回到主菜单并尝试单击时在另一个按钮上，它第一次没有用，我必须单击几次以使其起作用。

我认为问题是当我返回菜单时，该应用程序尚未准备好接收按钮上的单击。会发生吗？

非常感谢您。

这是代码：

HOME.HTML

<ion-content overflow-scroll="false">
<img class="header_image" src="{{headers}}">     
<img src="assets/imgs/logo_320.png" [ngClass]="{ 'hide': this.mostrar==0 }" class="icono_vivilacosta animation-target">
<ion-grid>
    <ion-row justify-content-center align-items-center>
        <ion-col *ngFor="let inicio of principal" class="Cuadrados {{inicio.clase}}" (click)="VerPagina(inicio.pagina)">
            <div class="ConteinerIcono">
                <img src="{{inicio.icono}}" class="icono ">
                <p class="Categoria"> {{inicio.titulo}} </p>
            </div>
        </ion-col> 
    </ion-row>
  </ion-grid>

HOME.TS：

export class HomePage {
      principal;
      url;
      headers;
      mostrar;
      constructor(public navCtrl: NavController, public http: HttpClient,public loadingCtrl: LoadingController) {
        this.url = '*********';
        let loading = this.loadingCtrl.create({
          content: 'Cargando...'
        });
        loading.present(); 
        this.http.get(this.url).subscribe((data) => {
          if (Object.keys(data).length!=0){
            this.headers = data[0].imageUrl;
            this.mostrar = data[0].logoVisibility;
          } else {
            this.headers = 'assets/imgs/header.png';
            this.mostrar = 1;
          }
          loading.dismiss();
        });

        this.principal = [
          {
            titulo: 'EVENTOS',
            clase: 'EVENTOS',
            pagina: 'EventosPage',
            icono: 'assets/imgs/eventos.png'
          },
          {
            titulo: 'CINE Y TEATRO',
            clase: 'CINESYTEATROS',
            pagina: 'CinesPage',
            icono: 'assets/imgs/cineteatro.png'
          },
          {
            titulo: 'NOTICIAS',
            clase: 'NOTICIAS',
            pagina: 'NoticiasPage',
            icono: 'assets/imgs/noticias.png'
          },
          {
            titulo: 'PARQUES',
            clase: 'PARQUES',
            pagina: 'ParquesPage',
            icono: 'assets/imgs/parques.png'
          },
          {
            titulo: 'CAJEROS',
            clase: 'CAJEROS',
            pagina: 'CajerosPage',
            icono: 'assets/imgs/cajeros.png'
          },
          {
            titulo: 'TELEFONOS',
            clase: 'TELEFONOS',
            pagina: 'TelefonosPage',
            icono: 'assets/imgs/telefonos.png'
          }
        ];
      }
      VerPagina(Variable){
        switch(Variable) { 
          case 'EventosPage': { 
            this.navCtrl.push(EventosPage);
          break; 
          } 
          case 'CinesPage': { 
            this.navCtrl.push(CinesPage);
          break; 
          } 
          case 'NoticiasPage': { 
            this.navCtrl.push(NoticiasPage);
          break; 
         } 
         case 'ParquesPage': { 
          this.navCtrl.push(ParquesPage); 
          break; 
        }
        case 'TelefonosPage': { 
          this.navCtrl.push(TelefonosPage); 
          break; 
        }
        case 'CajerosPage': { 
          this.navCtrl.push(CajerosPage); 
          break; 
        } 
       }   
      }

    }

Answer 1

Ionic向(click)或button标记中没有的a函数添加了300ms的超时时间。

有时候这意味着当您按下它时，您需要按住点击按钮才能触发该功能。

请尝试使用(click)，而不是使用(tap)，这将停止300ms的延迟并立即起作用。

<ion-col 
  *ngFor="let inicio of principal"
  class="Cuadrados {{inicio.clase}}" 
  (tap)="VerPagina(inicio.pagina)"
>

请查看他们文档中的gestures区域，以了解click，tap，press之间的区别。

NavCtrl和Click出现离子问题

1 个答案: