2
votes

Le défilement du contenu ne fonctionne pas lors de l'utilisation des onglets ioniques dans ionic 4

Je ne suis pas en mesure de faire défiler le contenu lorsque j'utilise

Ionic 4 + Angular 7

Cela semble empêcher l'écran de faire défiler l'écran.

<app-header></app-header>
<ion-content scroll="true">
Dashboard
This is the test content    
</ion-content>
            <ion-tabs>
    <ion-tab-bar slot="bottom">
    <ion-tab-button tab="dashboard>
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="leave">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

ionic4 angular7

0 commentaires

4 Réponses :

1
votes

Ce problème a été résolu dans la version 1.2.4 de framework ionique, veuillez mettre à jour votre ionic.

Ceci est un correctif courant, éditez scss/_scaffolding.scss:

<ion-scroll direction="xy" style="width: 500px; height: 500px"> </ion-scroll>

Vous pouvez également essayer :

div {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

Ou un scroll natif:

  &.pane {
    overflow-x: hidden;
    overflow-y: scroll;
  }

J'ai eu le même problème, et j'ai remarqué que si j'ajoutais overflow-scroll = false le scroll fonctionne et avec true ne l'est pas

0 commentaires

3
votes

Désolé de répondre aussi tard et plus qu'une réponse, c'est une solution de contournement, mais cela pourrait décoller les gens, je vais donc le laisser ici:

Supprimez les balises " ".

Je n'ai pas trouvé d'autre moyen, mais c'est plutôt une solution de contournement car ce sont ces balises qui devraient vous permettre de laisser tout le routage vers Ionic.

J'apprécierais toujours une meilleure réponse.

0 commentaires

1
votes

J'ai résolu d'ajouter sur mon code, comme ceci

    <ion-toolbar>
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="video">
      <ion-icon name="videocam"></ion-icon>
      <ion-label>Video Learning</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="podcast">
      <ion-icon name="musical-notes"></ion-icon>
      <ion-label>Podcast</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
</ion-toolbar>

1 commentaires

Cela a fonctionné pour moi. Vous n'avez pas à mettre le tout dans ion-content , ce qui a plus de sens.

0
votes

Essayez ceci:

<ion-footer>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="dashboard>
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="leave">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-footer>

Vous devez ajouter ion-footer

0 commentaires