web-dev-qa-db-fra.com

Comment avoir une liste d'ions ioniques> = 2 dans une barre de recherche fixe?

J'ai une application ionique> = 2 dans laquelle je voudrais avoir 2 ou 3 lignes fixes en haut de la page, puis le reste de la page sous forme de liste déroulante veulent obtenir la liste simple de travail).

À titre d’exemple simplifié, j’ai le code suivant: plunk . Le balisage répété ici est ..

    <ion-header>
          <ion-navbar>
            <ion-title>{{ appName }}</ion-title>
           </ion-navbar>
    </ion-header>

    <ion-content scroll=false>
       <ion-grid>
         <!-- Row 1 fixed at top -->
         <ion-row>
           <ion-col>
             <ion-searchbar></ion-searchbar>   
           </ion-col>
           <!-- Other cols -->
         </ion-row>

        <!-- Row 2 Scrollable list -->
        <ion-row>
          <ion-col>
            <ion-list>    
              <ion-item *ngFor="let item of data">      
                <div>{{item}}</div>
              </ion-item>          
            </ion-list >  
          </ion-col>
       </ion-row>

       </ion-grid>
    </ion-content>

Le problème est que la barre de recherche défile également avec la liste, alors que j'aimerais que cela reste toujours visible en haut de la page.

Est-ce que quelqu'un sait pourquoi la barre de recherche défile aussi alors que c'est dans une rangée complètement séparée de la liste d'ions? Devrais-je utiliser une grille d'ions de cette façon?

Merci d'avance pour votre aide!

css3ionic-frameworkionic2flexbox
7
peterc

ion-content n'a pas de propriété d'entrée scroll pour le désactiver.
Si vous devez avoir searchbar toujours visible, je vous suggère de le placer dans une barre d’outils.

<ion-header>
      <ion-navbar>
        <ion-title>{{ appName }}</ion-title>
       </ion-navbar>
       <ion-toolbar>
           <ion-searchbar></ion-searchbar>
       </ion-toolbar>
</ion-header>

Ou utilisez ion-scroll avec une hauteur fixe.

<ion-grid>
    <!-- Row 2 Scrollable list -->
    <ion-row>
      <ion-col>
          <ion-searchbar></ion-searchbar>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100vh" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of data">
            <div>{{item}}</div>
          </ion-item>
        </ion-list>
        </ion-scroll>

      </ion-col>
    </ion-row>

  </ion-grid>

Sample Plunkr

Mise à jour: pour répondre au commentaire de @ JohnDoe .. afin que la liste de défilement prenne la hauteur restante de l'écran, utilisez Viewport percent height pour définir la hauteur ion-scroll.

15
Suraj Rao

Voici comment j'ai réussi à faire défiler une liste au bas de la page sans faire défiler toute la page:

HTML

<ion-content>
    <div class="table">
        <div class="table-row">
            <ion-searchbar></ion-searchbar>
        </div>
        <div class="table-row last-row">
            <div class="table-cell cell-content-outer-wrapper">
                <div class="cell-content-inner-wrapper">
                    <div class="cell-content">
                        <ion-list>
                            <ion-item *ngFor="let item of data">
                                <div>{{item}}</div>
                            </ion-item>
                        </ion-list>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-content>

CSS

.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-row {
   display: table-row;
}
.table-cell {
   display: table-cell;
}
.last-row {
   height: 100%;
}
.cell-content-outer-wrapper {
   height: 100%;
}
.cell-content-inner-wrapper {
   height: 100%;
   position: relative;
   overflow: auto;
}
.cell-content {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

Utilise beaucoup de divs mais cela a fonctionné pour moi dans ionic 2 et onsen-ui aussi bien quand je faisais face au même problème.

0
John Volkya