Ionic-framework: ionic2 - défilement vertical à l'intérieur d'une diapositive

@susanlinsfu Merci d'avoir ouvert un problème avec nous ! Cela vous dérangerait-il de créer un plunker ou un codepen que nous pourrons utiliser pour reproduire votre problème ? Voici un modèle que vous pouvez utiliser pour créer votre plunker : http://plnkr.co/edit/L8JN6w5mqwbMY2E14dbk?p=preview

Salut,

J'ai créé un punker : http://plnkr.co/edit/G0LbU4SL9uVFgj6zCJYE?p=preview . Essentiellement, il y a une diapositive. Cette diapositive a une liste avec de nombreux éléments. Cette liste est une grande liste, donc l'utilisateur doit pouvoir faire défiler vers le bas pour les voir tous, mais le défilement n'est pas possible.

J'ai essayé d'ajouter style="overflow-y:scroll" à la diapositive et le défilement est activé, mais si vous regardez, vous remarquerez que des éléments sont coupés de sorte que la liste entière ne s'affiche pas.

Acclamations

@brandyscarney Désolé de demander, mais je me demandais s'il y avait eu des progrès à ce sujet?

Hé @susanlinsfu , malheureusement, je n'ai pas encore cherché à résoudre ce ion-slides afin de le corriger pour votre cas d'utilisation spécifique :

ion-slides {
  height: auto;
}

Faites-moi savoir si cela ne fonctionne pas !

@brandyscarney, cela permet le défilement et tous les éléments s'adaptent, mais la hauteur devient aussi grande que la plus grande diapositive pour toutes les diapositives. Cela signifie que si la diapositive 1 contient plus d'éléments que la diapositive 2, puis la diapositive 2 une fois qu'elle aura fait défiler jusqu'au dernier élément, elle pourra continuer à faire défiler l'espace blanc vide.

Essayer
.slide-zoom{
hauteur : 100 % ;
}

@Elfwines Salut, je l'ai essayé et cela n'a rien fait.

@susanlinsfu : Regardez ici http://plnkr.co/edit/SjYtZYdBCIph5ipyyrn6?p=preview . Je voulais dire en plus du débordement-y, désolé.

@Elfwines AHHHHHh mes excuses, oui cela fonctionne exactement comme je veux que cela fonctionne ! Merci beaucoup pour le punkr !

Le correctif a fonctionné pour moi.
Cela fera-t-il partie des prochaines versions? Ou peut-être l'est-il déjà ?

Donc rien de tout cela n'a fonctionné pour moi. J'ai fini par envelopper mon contenu dans des balises ion-scroll et ajouter ce qui suit à mon culot pour que le bas défile au-dessus des points de pagination.

ion-scroll
  height: 100%
  .scroll:after
    content: " "
    display: block
    height: rem(100)

humm .. obtenez le même bogue ici et cette solution ne fonctionne pas. Je suis un débutant dans l'application et je n'ai pas été en mesure de créer un plunker fonctionnel... autre chose à essayer ?? https://plnkr.co/edit/9BMTxpdUUIB4NMZiUXin?p=preview

solution de contournement !!! Je viens d'ajouter une balise <ion-content> et cela fonctionne bien.

<ion-view view-title="programs">
<ion-content padding="true" >
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="alarme dans alarms">
<ion-content>
<div class="list">`

Essayer

ion-slide{
      ion-list{
          height: 100vh;
          overflow-y: scroll;
      }
}

Je peux confirmer que l'ajout d'un <ion-content scroll="true"> à l'intérieur dupermettra de faire défiler verticalement la vue.

Le contenu, cependant, chevauchera les indicateurs de page du curseur : je ne sais pas exactement comment le résoudre, mais une approche possible consiste à utiliser calc (css3) sur la hauteur du contenu ionique pour réduire le hauteur du contenu, afin qu'il ne chevauche pas les indicateurs, mais cela ne fonctionnera pas sur tous les appareils.

Vous pouvez également styliser l'indicateur pour qu'il ait une couleur d'arrière-plan unie.

J'ai un curseur qui glisse "verticalement". l'une des pages contient une liste de cartes qui doivent également défiler verticalement. pouvons-nous faire cela, y a-t-il une solution à ce problème
```javascript

première page

Hier

J'ai résolu ce problème avec ce css simple:

ion-slides { height: initial; }

@jalbertos
cela ne fonctionne pas pour moi. aucun élément ne s'affiche dans la page après ce "CSS"

ce que je dois faire, c'est laisser l'utilisateur glisser vers le bas, puis le client peut faire défiler la transaction (faire défiler vers le bas et vers le haut) et lorsqu'il atteint la fin, il peut à nouveau glisser vers le haut.

Exemple : Snapchat lorsque l'utilisateur glisse vers le bas, il verra la liste des images et il peut les parcourir et lorsqu'il fait défiler vers le haut et atteint la fin et continue de faire défiler la page glisse à nouveau vers la caméra.

le focus à partir du cinquième champ de saisie ne fait pas défiler les éléments par rapport au rembourrage inférieur ajouté

<ion-content>
    <ion-slides>
    <ion-slide>
        <ion-list>
      <ion-item>
        <ion-label floating>item1</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item2</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item3</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item4</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item5</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item6</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item7</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item8</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>      
    </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>

Comme @brandyscarney l'a dit, la définition de la hauteur dans CSS résout le problème pour un curseur. Mais lorsque vous passez à la diapositive suivante, qui peut être plus petite que la première, il y a un espace vide en bas du contenu car la hauteur est appliquée à l'ensemble du curseur.

Voici mon correctif temporaire CSS (c'est très _hacky_ et je déteste ça):

ion-slide {
    .slide-zoom {
        height: calc(100vh - 143px);
        overflow-y: auto;
    }
}

Le 143px vient de l'ajout de 60px pour l'en-tête supérieur, 41px pour les onglets inférieurs, plus un rembourrage vertical de 16px sur mon ion-content

Cette solution fonctionne parfaitement jusqu'à ce que vous vouliez un à l'extrémité inférieure, alors il ne se déclenche pas...
Quelqu'un a-t-il le même problème et une solution qui fonctionne ?

j'ai fini avec

.html

<ion-slides>
<ion-slide>
  <ion-content>
    <ion-infinite-scroll (ionInfinite)="doInfiniteFetchProducts($event)" *ngIf="...">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
</ion-slide>
<ion-slide>
  <ion-content>
    <...>
 </ion-content>
</ion-slide>
</ion-slides>

.scss

ion-slide {
.slide-zoom {
  height: 100%;
  ion-content {
    .scroll-content {
      margin-bottom: 0px !important;
    }
  }
}

}

ion-slide{
    overflow: auto;
}

.slide-zoom {
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 50px 10px;
}

Rien n'a fonctionné pour moi

cela a fonctionné pour moi sur des diapositives de différentes hauteurs

.swiper-slide {
   display: block;
}

ion-slide{ 
  ion-list{
      height: 90vh; // padding for footer
      overflow-y: scroll;
  }
}

.swiper-slide{
overflow-y : défilement ;
bloc de visualisation;
}

glissement ionique{
hauteur : automatique ;
}

A travaillé pour des diapositives de longueurs variables.

Maintenant, le rafraîchisseur d'ions ne fonctionne pas correctement. Il est actualisé chaque fois que je fais défiler vers le bas, même s'il y a plus d'éléments dans la liste.

Merci pour le problème ! Nous avons déplacé le code source et les problèmes d'Ionic 3 dans un référentiel séparé. Je déplace ce problème vers le référentiel pour Ionic 3. Veuillez suivre ce problème là-bas.

Merci d'avoir utilisé Ionic !

Problème déplacé vers : https://github.com/ionic-team/ionic-v3/issues/43