Question

我正在使用选项卡使用Ionic 4开发一个应用程序，已经使用选项卡样板创建了一个应用程序，但我没有进行任何更改。我在每个选项卡上都放了离子刷新器，当我拉动刷新器时，我会显示骨架并隐藏选项卡的默认内容，然后在事件设置为完成时超时，然后再次显示内容，然后切换到第二个选项卡和刷新器在我拉出时不起作用。有人遇到过同样的问题吗？

这是我在每个选项卡中使用的HTML刷新器代码：

 <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
     <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

标签的每个Typescript文件中的

Typescript代码）：

 public loading_content = false;

 refresh(event) {
      this.loading_content = true;

      setTimeout(() => {
           event.target.complete();
           this.loading_content = false;
      }, 300);
 }

使用该代码，我将显示和隐藏内容和框架，这是我在标签页中拥有的完整HTML代码：

 <ion-content padding>
      <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
           <ion-refresher-content></ion-refresher-content>
      </ion-refresher>

      <div *ngIf="loading_content">
           <ion-list class="skeleton-list">
                <ion-item *ngFor="let index of [1,2,3,4,5,6,7,8,9,10]">
                     <ion-label>
                          <h3>
                               <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
                          </h3>
                          <p>
                               <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
                          </p>
                          <p>
                               <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
                          </p>
                     </ion-label>
                </ion-item>
           </ion-list>
      </div>


      <div *ngIf="!loading_content">
           <ion-card class="welcome-card">
                <ion-img src="/assets/shapes.svg"></ion-img>
                <ion-card-header>
                     <ion-card-subtitle>Get Started</ion-card-subtitle>
                     <ion-card-title>Welcome to Ionic</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                     <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
                </ion-card-content>
           </ion-card>
      </div>
 </ion-content>

使用骨架时离子刷新器停止工作

0 个答案: