Ad

Ionic Refresher Get's Fired Automatically On Page Load?

- 1 answer

Ionic refresher seems to be refreshing the page without being manually calling the doRefresh. I would like the refresher to only execute when the "pull down" action is done.

Seems like doRefresh is executed on "ionviewdidload" function automatically.

<ion-refresher (ionRefresh)="doRefresh($event);">
  <ion-refresher-content 
       pullingText="Pull to refresh" pullingIcon="arrow-dropdown" 
       refreshingSpinner="circles"
       refreshingText="..fetching">
   </ion-refresher-content> 
</ion-refresher>

home.ts

    doRefresh(refresher) {

    console.log('the current tab that is set = ' + this.tabSelId);



    console.log('testing');
    this.user = JSON.parse(window.localStorage.getItem('user'));
    let self_ = this;
    let devicePos = null;


    let devicelat = null;
    let devicelong = null;

    Geolocation.getCurrentPosition().then((position) => {


        // self_.loadingData(devicePos);
        devicelat = position.coords.latitude;
        devicelong = position.coords.longitude;

        self_.get_all_posts(devicelat, devicelong, self_.tabSelId);

        refresher.complete();



    }, (err) => {
        console.log('failed to get lat and long :' + err);

            self_.get_all_posts(devicelat, devicelong, self_.tabSelId);



        // self_.filter_posts_by_type(self_.tabSelId);

        // loading.dismiss();
        // refresher.complete();


    });



}

on my ionviewdidload function (home.ts):

    ionViewDidLoad(){

    this.user = JSON.parse(window.localStorage.getItem('user'));
    let self_ = this;
    let devicePos = null;

        console.log('the current tab that is set = '+this.tabSelId);

    let devicelat = null;
    let devicelong = null;

    Geolocation.getCurrentPosition().then((position) => {

        devicelat = position.coords.latitude;
        devicelong = position.coords.longitude;

        console.log('%c executing when position is got successfully ', 'background: #222; color: #bada55');


        self_.get_all_posts(devicelat, devicelong, self_.tabSelId);


        console.log('executing when position is got successfully');


    }, (err) => {
        console.log('failed to get lat and long :' + err);

            devicelat = 28.318237;
            devicelong = 111.168137;

            self_.get_all_posts(devicelat, devicelong, self_.tabSelId);



    });

is it the default behaviour when using

"ion-refresher"

I would like the refresher to only fire when "pull down" action is done. Don't know why the doRefresh() function is being executed when the app is loaded (the first time only)

Ad

Answer

In your Html use like..

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

In .ts use like...

 doRefresh(event) {
    this.userPost();
    setTimeout(() => {
      event.target.complete();
    }, 2000);
  }
Ad
source: stackoverflow.com
Ad