Onsen-UI Swipe Navigation

Question

Ich versuche herauszufinden, wie man das "android" Gefühl auf Onsen-UI mit Hilfe der Swipe-Navigation implementieren kann.

Ich habe versucht, die Umsetzung von idangerous Swiper, aber nicht viel Glück. Meine Idee ist, zu kombinieren:

http://codepen.io/negibouze/pen/jEvOYz

enter code here 

http://codepen.io/negibouze/pen/wBLeyp

enter code here 

Wenn Sie Swipe, die Registerkarten ändern, hat aber diese Swipe Animation/Effekt. Ich würde es auch lieben, wenn jeder Tab/Swipe eine andere HTML und nicht eine Indexdatei wäre.

Irgendwelche Ideen oder Hilfe?

Answer 1

Große Frage. Es gibt zwei verschiedene Ansätze:

1. Wie es in Ihrem zweiten Beispiel mit Tabbar und Gestenerkennung getan wird. Onsen 2.0 hat eine slide Animation für die Tableiste, so dass Sie nur hinzufügen müssen. Onsen 2.0 ist noch in der Alpha-Version, wird aber in den kommenden Wochen veröffentlicht. Der Nachteil dieses Ansatzes besteht darin, dass die Folienanimation gestartet wird, nachdem die Wischaktion abgeschlossen wurde.

Sie fügen im Allgemeinen Ihr ons-tabbar Element und dann die Geste Detektor wie folgt konfigurieren:

ons.ready(function() { 
    // Create a GestureDetector instance over your tabbar 
    // The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...) 
    var gd = ons.GestureDetector(myTabbar._element[0]); 

    gd.on('swipe', function(event) { 
    var index = myTabbar.getActiveTabIndex(); 
    if (event.gesture.direction === 'left') { 
     if (index < 3) { 
     myTabbar.setActiveTab(++index); 
     } 
    } else if (event.gesture.direction === 'right') { 
     if (index > 0) { 
     myTabbar.setActiveTab(--index); 
     } 
    } 
    }) 
}); 

hier Arbeiten: https://jsfiddle.net/frankdiox/o25novtu/1/

2. Kombination ons-tabbar und ons-carousel Elemente . Der Nachteil dieses Ansatzes besteht darin, dass ons-carousel-item keine Vorlage oder eine separate Datei abrufen kann (überprüfen Sie die Kommentare, um eine andere Problemumgehung zu finden).

ons-tab erfordert ein page Attribut und Sie können es nicht leer lassen, ohne Fehler in der Konsole, aber wir können ons-tabbar ‚s-Art anstelle der tatsächlichen Komponente verwenden: http://onsen.io/reference/css.html#tab-bar

Wir es kombinieren jetzt mit einem Vollbild-Karussell wie die erwähnten Sie und die nächste CSS hinzufügen, den Inhalt dieser Seite respektieren unsere Tabbar zu machen, damit es über oder dahinter nicht fallen:

ons-carousel[fullscreen] { 
    bottom: 44px; 
} 

Nächster Schritt verbinden wir alle Register mit seinem entsprechenden c arosel Artikel:

<div class="tab-bar" id="myTabbar"> 
    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)"> 
    ... 
    </label> 

    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)"> 
    ... 
    </label> 

    <label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)"> 
    ... 
</div> 

Und so weiter. Wenn Sie auf eine Registerkarte klicken, ändert sich das Karussell automatisch. Jetzt müssen wir die umgekehrte Verbindung herstellen: Aktualisiere die überprüfte Registerkarte, wenn wir das Karussell wischen. Die Tabbar ist im Grunde eine Reihe von Radio-Buttons, so brauchen wir nur das, was wir in der postchange Veranstaltung Karussell wollen bekommen und es überprüfen:

ons.ready(function(){ 
    carousel.on('postchange', function(event){ 
    document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true; 
    }); 
}); 

Sie nun den Inhalt jeder carousel-item-index ändern kann, und legen Sie eine ons-page mit alles was du willst.

Arbeiten hier: http://codepen.io/frankdiox/pen/EVpNVg

Wir haben eine Funktion hinzufügen kann dies leichter in den kommenden Versionen von OnsenUI zu machen.

Hoffe es hilft!