Ion-refresher and swipe tabs

[butavpaul]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ X] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [ X] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

I'm using swipe tabs for my app and I want to use also the refresher. All is working great until you want to swipe, because when you swip and your finger is not perfectly horizontal it will also pull down the content because of the ion-refresher. In this way you can use swipe and refresher at the same time. This happens only when your scroll is at 0 because if I scroll down and I want to swipe the scroll is blocked and all works perfectly. Expected behavior:

The ion-refresher should work only when your view is "active". Once the swipe is active this should not work. Steps to reproduce:

Simply use ion-refresher and super-tabs (https://github.com/zyra/ionic2-super-tabs) together.

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

@ionic/cli-utils  : 1.15.0
ionic (Ionic CLI) : 3.15.0
cordova (Cordova CLI) : 7.0.1 
@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1
Node : v8.4.0
npm  : 5.4.2 
OS   : macOS Sierra
ANDROID_HOME : not set
backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us!

I have marked this as something to have a look at after the initial Ionic v4 release.

Thank you for using Ionic

[tmvnk]

Same with slide back a page. If you did a pull refresh - slide back a page - finger not perfectly horizontal - page is moving a bit.

This is in my opinion where ionic completely shows it’s not native ;)

Example: Untapped app

[heidji]

I can't implement refresher on vertical ion-slides. the refresher would appear on any slide if the user swipes diagonally and it won't appear on any slide, even the first one if the user slides perfectly horizontal. the resistance settings on the swiper won't do anything, the refresher only functions if the content area was moved and it won't work at all if the user triggers a swipe inside the nested slide area. if anyone has a workaround, for example how to detect a bounce event on the first slide so i could implement the refresher manually please help!

[jayzyaj]

Is this still an issue until now?

[chhavi2]

You will have to control the ion-refresher being enabled based on if the ion-slide scrollTop is less than 10. This way you will be restricting its enabled state and it won't be triggered with scroll up inside the ion-slide or ion-scroll and scroll position will be retained in each slide. Code Sample below -

in your corresponding *.ts file -

import { ViewChildren, QueryList } from '@angular/core';
import { Slides} from 'ionic-angular';

@ViewChild('mySlider') slider: Slides;
@ViewChildren('myScroll') components:QueryList<Scroll>;

isRefresherEnabled() {
    if (this.slider) {
        const activeSlideIdx = this.slider.getActiveIndex();
        if (this.components && this.components['_results']) {
            if (this.components['_results'][activeSlideIdx]) {
                if (this.components['_results'][activeSlideIdx]['_scrollContent']) {
                    if (this.components['_results'][activeSlideIdx]['_scrollContent'].nativeElement.scrollTop <= 10) {
                        return true;
                    }
                }
            }
        }
    }
    return false;
}

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/892