Reputation: 205
I am doing an Ionic 3 app and on some pages there is no scroll, like this page :
History.html
<ion-card *ngFor="let h of History; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="HistoryPage">
<ion-card-header>
<span class="title">{{h.nom_commun}}</span>
<span class="date">{{h.date_signalement}}</span>
<button (click)="openPage()" class="edit">
<ion-icon large name="create" color="mainColor" class="edit"></ion-icon>
</button>
</ion-card-header>
<ion-card-content>
<ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" color="mainColor"></ion-icon>
<br />
<div *ngIf="isGroupShown(i)">
<div class="up">
<ion-slides class="Pictures" slidesPerView="3">
<ion-slide>
<img src="{{h.image}}" />
</ion-slide>
<ion-slide>
<img src="../assets/img/rossignol3.jpg" />
</ion-slide>
<ion-slide>
<img src="../assets/img/rossignol4.jpg" />
</ion-slide>
<ion-slide>
<img src="{{h.pictures}}" />
</ion-slide>
</ion-slides>
<ion-list>
<p><strong>Nom codifié :</strong> {{h.nom_codifie}}</p>
<p><strong>Etat actuel :</strong> {{h.etat_actuel}}</p>
<p><strong>Date de réception :</strong> {{h.date_reception}}</p>
<p *ngIf="h.date_renvoi"><strong>Date de renvoi en liberté :</strong> {{h.date_renvoi}}</p>
<p><strong>Pays :</strong> {{h.pays}}</p>
<p><strong>Lieu de signalement :</strong> {{h.lieu_signalement}}</p>
<p><strong>Condition du signalement :</strong> {{h.condition_signalement}}</p>
<p><strong>Numéro d'immatriculation :</strong> {{h.immatriculation}}</p>
</ion-list>
</div>
</div>
</ion-card-content>
</ion-card>
History.ts :
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EditBirdPage } from '../EditBird/EditBird';
import { BirdService } from '../../providers/bird-service';
import { jQuery } from 'jquery';
@Component({
selector: 'page-History',
templateUrl: 'History.html'
})
export class HistoryPage {
History:any =[];
constructor(public navCtrl: NavController, public serviceOne: BirdService) {
this.serviceOne.getData().subscribe(
data => this.History = data
);
}
openPage() {
this.navCtrl.push(EditBirdPage);
}
shownGroup = null;
toggleGroup(group) {
if (this.isGroupShown(group)) {
this.shownGroup = null;
} else {
this.shownGroup = group;
}
};
isGroupShown(group) {
return this.shownGroup === group;
};
}
The scroll work only on page with basic text but with content which is generate or open manually ( like an accordion ) it's not working.
Thanks for your help !
Upvotes: 0
Views: 1375
Reputation: 344
<ion-header>
<ion-navbar>
<ion-title>InfScroll</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
home.ts
export class InfScrollPage {
items = [];
constructor(public navCtrl: NavController, public navParams: NavParams) {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
// ionViewDidLoad() {
// console.log('ionViewDidLoad InfScrollPage');
// }
}
I hope it will help you
Upvotes: 0
Reputation: 3233
If you want your content to be scrolled, you need to wrap it inside ion-content like this,
<ion-content>
--your scrolling content goes here--
</ion-content>
in your case if you want History.html contents to be scrolled, then wrap it inside ion-content like this,
<ion-content>
<ion-card *ngFor="let h of History; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="HistoryPage">
<ion-card-header>
<span class="title">{{h.nom_commun}}</span>
<span class="date">{{h.date_signalement}}</span>
<button (click)="openPage()" class="edit">
<ion-icon large name="create" color="mainColor" class="edit"></ion-icon>
</button>
</ion-card-header>
<ion-card-content>
<ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" color="mainColor"></ion-icon>
<br />
<div *ngIf="isGroupShown(i)">
<div class="up">
<ion-slides class="Pictures" slidesPerView="3">
<ion-slide>
<img src="{{h.image}}" />
</ion-slide>
<ion-slide>
<img src="../assets/img/rossignol3.jpg" />
</ion-slide>
<ion-slide>
<img src="../assets/img/rossignol4.jpg" />
</ion-slide>
<ion-slide>
<img src="{{h.pictures}}" />
</ion-slide>
</ion-slides>
<ion-list>
<p><strong>Nom codifié :</strong> {{h.nom_codifie}}</p>
<p><strong>Etat actuel :</strong> {{h.etat_actuel}}</p>
<p><strong>Date de réception :</strong> {{h.date_reception}}</p>
<p *ngIf="h.date_renvoi"><strong>Date de renvoi en liberté :</strong> {{h.date_renvoi}}</p>
<p><strong>Pays :</strong> {{h.pays}}</p>
<p><strong>Lieu de signalement :</strong> {{h.lieu_signalement}}</p>
<p><strong>Condition du signalement :</strong> {{h.condition_signalement}}</p>
<p><strong>Numéro d'immatriculation :</strong> {{h.immatriculation}}</p>
</ion-list>
</div>
</div>
</ion-card-content>
</ion-card>
</ion-content>
Upvotes: 3