web-dev-qa-db-fra.com

ionic 3.2 - Comment désactiver le défilement du contenu ionique?

Je développe une application en version Ionic 3.2. J'ai un correcteur d'ions à l'intérieur d'ion-scroll. Je souhaite désactiver le défilement de ion-content et afficher le ion-refresher dans le ion-scroll lorsque vous faites défiler le ion-list. Mais ça échoue. 

  • J'ai essayé no-bounce (<ion-content no-bounce>) et disable-scroll (<ion-content disable-scroll>) mais le contenu continue de défiler 
  • J'ai essayé de mettre ion-fixed dans content et dans un div juste en dessous de content. Mais alors le ion-refresher ne fonctionne pas.
  • J'ai essayé scroll="false" (comme dans ionic 1.0) mais je fais toujours défiler

Ci-dessous le code; 

    <ion-content scroll="false">
    <ion-scroll scrollY="true" style="width: 100% !important;height:30% !important"> 
        <ion-refresher (ionRefresh)="fill_data($event)">
          <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{ 'pull_to_refresh' | translate }}" refreshingSpinner="circles"
            refreshingText="{{ 'refreshing' | translate }}">
          </ion-refresher-content>
        </ion-refresher> 
        <ion-list>
          //data filling here
        </ion-list>
      </ion-scroll>
    </ion-content>

Aidez-moi, s'il vous plaît...

cordovaionic-frameworkionic2ionic3
5
Tony

C'est comme ça que je l'ai fait tout à l'heure - même problème que vous @Tony

Avec ce SCSS, ma liste défile et je peux avoir des éléments en dessous:

page-home {
  .scroll-content {
    overflow: hidden;
  }

  ion-list {
    overflow-y: auto;
    max-height: 72vh;
  }
}

J'ai essayé d'utiliser la variable scroll et d'autres options, mais aucune ne semble fonctionner actuellement. 

2
Evan Shortiss

.scroll-content {
    overflow-y: hidden !important;
}

cela a fonctionné pour moi

2
Zhang Bruce

utiliser dans le fichier sass de la page ..il fonctionne pour moi 

.scroll-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
}
1
Alex

Vous pouvez déboguer l'application ios Ionic à l'aide de Safari. Pendant le débogage, vous remarquerez l'efficacité de l'application.

.scroll-content {
    overflow-y: hidden !important;                                          
}

Cela désactivera le défilement du contenu des ions et le défilement de la liste des ions.

div.scroll-content {
    bottom: 0px !important;                                                   
}

Il est plus efficace de désactiver le défilement du contenu ionique. Il empêche seulement la teneur en ions mais la liste des ions

0
JinLang

Remplacer le contenu de défilement, style

scroll-content {
    overflow-y: auto;
}

j'espère que ça marchera pour toi

0
Nakul Kundaliya

Je l'ai résolu. c'est très simple.

ion-content > div.scroll-content {
    overflow: hidden;
}

Donc, il ne sera appliqué que pour la teneur en ions.

0
Coco W.

Essayez ci-dessous le code de style dans votre 'src\app\app.scss'

.scroll-content {
    overflow-y: auto !important;
}
0
OH3VCI
<ion-content>
   <ion-grid>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100px" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of testData">
            <div>{{item}}</div>
          </ion-item>
        </ion-list>
        </ion-scroll>

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

  </ion-grid>
  <p>other data</p>
  <ion-list>
    <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
  </ion-list>
</ion-content>

andin .ts fichier:

testData = [];

  constructor(public navCtrl: NavController) {
       for(let i =0;i<100;i++){
      this.testData.Push(i);
    }
  }

vérifier ceci plunk

0
varun aaruru