0

I implemented ion-refresher on the component embed page as below.

[home.page.html]

<ion-content [fullscreen]="true">
 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
   <ion-refresher-content></ion-refresher-content>
 </ion-refresher>
 <app-event-list></app-event-list>
</ion-content>

[home.page.ts]

  doRefresh(refresher) {
    setTimeout(() => {
      refresher.target.complete();
    }, 2000);
  }

[event-list.component.html]

<ion-list>
 <ion-item>
  <ion-label>item1</ion-label>
 </ion-item>
.
.
.
 <ion-item>
  <ion-label>item20</ion-label>
 </ion-item>
</ion-list>

[event-list.component.ts]

@Component({
  selector: 'app-event-list',
  templateUrl: './event-list.component.html',
  styleUrls: ['./event-list.component.scss'],
})
export class EventListComponent {

My ionic info is

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.4
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Cordova:

   Cordova CLI       : 10.0.0 (cordova-lib@10.1.0)
   Cordova Platforms : android 10.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 8 other plugins)

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
   NodeJS            : v14.16.1 (/usr/bin/node)
   npm               : 6.14.4
   OS                : Linux 5.10

Just scrolling the list up a bit will bring up the ion-refresher spinner. The ideal behavior is to scroll to the top and then see the spinner. How do you get the ideal behavior?

spp
  • 33
  • 3
  • Have you tried to put refresher in it's own container or on it's own? In other words: see if the issue would be solved by putting refresher and event-list in different containers, with no parent container keeping them together. – Misha Mashina Feb 15 '22 at 13:12
  • Does "container" mean an .html file? Or is it "ion-content"? I'm sorry I don't understand. – spp Feb 15 '22 at 23:46
  • Ion-content, or div or anything - just to have refresher and list separated. They are currently under the same parent in dom. – Misha Mashina Feb 16 '22 at 09:37
  • I put the ion-refresher in another ion-content and put it out, but now I can scroll the list and the ion-refresher no longer appears. – spp Feb 17 '22 at 00:34
  • You should use only one ion-content in a view, so put the refresher on its own, and the list in ion-content. You can also use divs, ng-containers etc. – Misha Mashina Feb 17 '22 at 05:56
  • I tried enclosing ion-refresher and with ng-container respectively, but the result did not change. If you write ion-list directly in ion-content, it works fine, so I'm wondering if the embedding of the component is the cause. – spp Feb 18 '22 at 04:49
  • The only other thing I can think of is to discard the ion-content wrapper and leave the two components as they were. – Misha Mashina Feb 18 '22 at 05:55

0 Answers0