2015-06-05 9 views
16

Si verificano problemi che combinano lo ng-swipe e lo scorrimento orizzontale sul cellulare. Il caso d'uso è che ho una pagina che su swiping dovrebbe caricare next o previous e all'interno ci sono dei moduli che mostrano molte informazioni. Alcuni di essi sono scorrevoli.ngSwipe e scorrimento orizzontale

Quindi, non appena si scorre il colpo sul genitore calci e si naviga. Così ho messo un altro paio di ng-swipe sul genitore dell'elemento scorrevole con questo tipo di inganno:

self.onInnerSwipe = function($event) { 
    $event.originalEvent.preventAction = true; 
}; 

E poi il genitore:

var shouldActionProceed = function($event) { 
    return !$event || !$event.originalEvent || !$event.originalEvent.preventAction; 
}; 

self.goToPrev = function($event) { 
    if (shouldActionProceed($event)){ 
    // Do Magic 
    } 
} 

Questo fa il trucco in modo che l'azione non procede se sto scorrendo su quell'elemento ma lo scorrimento non funziona davvero. È un po 'ma non è così. Inizia un po 'e poi si ferma.

Su Chrome vengono registrati questi avvisi a volte.

ignorati tentativo di cancellare un evento touchmove con cancelable = false, per esempio perché scorrimento è in corso e non può essere interrotta.

Ho preparato una demo qui: http://jsbin.com/webologavu/2/ che è eccessivamente semplicistica ma è possibile riprodurre il problema.

Eventuali suggerimenti?

+0

Ho inviato una risposta molto breve. Mi piacerebbe aiutare ulteriormente ma non sono sicuro di avere davvero il problema. Ecco quello che ho capito: vuoi lo scorrimento sul genitore per cambiare la pagina, e lo scorrimento sull'ulteriore elemento interno per attivare solo una pergamena; è corretto? – Manube

+0

Questo è corretto sì. Voglio essere in grado di scorrere normalmente in orizzontale. –

+0

Non riesco a ottenere il codice corrente per navigare da un androide. È perché si disabilita provato a controllare per genitore/figlio. Puoi darmi un altro esempio che mostri il comportamento originale o spieghi cosa sto facendo male? –

risposta

2

Penso che sia un problema di concorrenza con questi eventi. Potrebbe funzionare meglio se il tuo evento genitore non si basa sull'evento figlio. Per farlo:

//add a identifier to your list element 
<ul class="myList" your-other-attrs></ul> 

//should proceed can rely on the target element to find out 
//if the target element belongs (or is) in your list. 
var shouldActionProceed = function($event) { 
    return !$($event.target).hasClass("myList") && //is myList? 
     $($event.target).parents(".myList").length == 0; //has parent 'myList'? 
}; 

In questo modo, l'evento genitore può funzionare sul suo on.

+0

hai provato questo, o è speculazione? –

+0

Ho provato qui: http://jsbin.com/vizugayire/1/edit?html,js,output Impossibile trovare alcun comportamento strano, tuttavia non sono completamente sicuro di cosa intendessi per "è una specie di lavoro ma non "così potresti essere il migliore per testarlo. – ThiagoPXP

+0

Quello era OP dicendo che –