2017-07-31 9 views
7

J'utilise ce plugin PullToRefresh:pulltorefresh.js - Désactiver temporairement

https://github.com/BoxFactura/pulltorefresh.js#api

Il fonctionne bien mais j'ai un pop-up sur ma page avec défilement en ligne div. Le problème est que lorsque je veux faire défiler vers le haut (dans le div) le PullToRefresh est déclenché. Est-il possible de "supprimer" ou de désactiver temporairement le PullToRefresh lorsque mon popup est ouvert?

PullToRefresh.init({ 
    mainElement: 'body', 
    onRefresh: function(){ 
     refreshAll(); 
    } 
}); 

modifier: delete PullToRefresh; // ne fonctionne pas

Edit2: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js

Répondre

6

PullToRefresh.init() retourne un objet avec une fonction destroy() comme rappel: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js#L326

var refresher = PullToRefresh.init({ 
    mainElement: 'body', 
    onRefresh: function(){ 
     refreshAll(); 
    } 
}); 

// destroy the PullToRefresh EventListeners when you open your popup 
refresher.destroy() 

Il y a aussi un problème Github ouvert ab sur l'amélioration de la façon de détruire cette bibliothèque après l'initialisation: https://github.com/BoxFactura/pulltorefresh.js/issues/22

0

IMO il ya deux façons raisonnable façons de le faire.

Vous pouvez définir un triggerElement et de mettre votre overlay en dehors de cette triggerElement:

PullToRefresh.init({ 
    mainElement: 'body', 
    triggerElement: '#mainContent', 
    onRefresh: refreshAll 
}); 

avec une marge un peu comme ce

<body> 
    <div id="containerForOverlays"></div> 
    <div id="mainContent"></div> 
</body> 

De cette façon, tout à l'intérieur de #containerForOverlays ne déclenchera pas rafraîchir.


Ou vous pouvez utiliser le nouveau crochet shouldPullToRefresh() si votre version prend en charge déjà.

Un exemple où PullToRefresh dépend d'une case à vérifier

<label><input id="refresh" type="checkbox"> Pull to Refresh?</label> 

en utilisant comme

PullToRefresh.init({ 
    mainElement: 'body', 
    shouldPullToRefresh: function(){ 
     return document.getElementById('pullToRefresh').checked 
    }, 
    onRefresh: refreshAll 
}); 

Bien sûr, je ne dis pas que vous utilisez une case à cocher dans votre code de production. Je voulais juste montrer comment vous pouvez dynamiquement "allumer et éteindre PullToRefresh". Dans cet exemple, en fonction de la case à cocher à vérifier.

C'est à vous de mettre en œuvre le bon shouldPullToRefresh() pour votre application afin de déterminer si PullToRefresh doit être actif ou non.