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>
) etdisable-scroll
(<ion-content disable-scroll>
) mais le contenu continue de défiler - J'ai essayé de mettre
ion-fixed
danscontent
et dans undiv
juste en dessous decontent
. Mais alors leion-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...
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.
.scroll-content {
overflow-y: hidden !important;
}
cela a fonctionné pour moi
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;
}
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
Remplacer le contenu de défilement, style
scroll-content {
overflow-y: auto;
}
j'espère que ça marchera pour toi
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.
Essayez ci-dessous le code de style dans votre 'src\app\app.scss'
.scroll-content {
overflow-y: auto !important;
}
<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