Windows Phone Panorama mit AngularJS

8

Ich versuche, die Windows Phone Ui in einer AngularJS-App zu replizieren. Hier ist ein Beispiel , wie ein Windows Phone Ui aussieht .

Unendlich wischen

Eine interessante Sache ist, dass die Paneele unendlich wischbar sind. Sie können weiter wischen und am ersten Panel wieder landen.

Um den unendlichen Wischvorgang zu erreichen, kopiere ich das erste und das letzte Feld und füge sie vor und nach dem ursprünglichen Feld wie folgt hinzu:

Wenn Sie zu einem kopierten Feld wischen (wie "3" oder "1"):

Sie werden sofort nach Beendigung des Swipe-Vorgangs zum reellen Panel weitergeleitet. Dies passiert, ohne dass der Benutzer es überhaupt weiß, weil es keine Animation gibt.

Problem

Das Problem ist, dass die Panels ng-controller , ng-repeat , ng-model oder eine beliebige Anzahl von Dingen haben können, die einen Bereich in ihnen erzeugen. Wenn ich das Markup dupliziere, wird ein neuer Bereich erstellt, der identisch mit dem Original beginnt, aber nicht synchron bleibt. Wie halte ich die Panel-Daten synchron?

ODER gibt es eine andere Möglichkeit, dies zu erreichen, die kein Duplizieren von Markup beinhaltet?

Ideen

  1. Eine Idee, die ich hatte, war, die DOM-Elemente zu verschieben anstatt zu duplizieren. Bei dieser Strategie ist mir eine deutliche Verzögerung aufgefallen, und wenn es nur zwei Panels gibt, bricht dies zusammen, weil das nicht ausgewählte Panel entweder vor oder nach dem aktuellen Panel gehen muss. Das war für mich wegen des wahrgenommenen Leistungsverlusts nicht akzeptabel
  2. Eine weitere Option ist die Verzögerung der Bewegung des Panel-Inhalts, bis der Wischvorgang abgeschlossen ist. Sie würden immer noch die Panel-Titel sehen, aber der Inhalt wäre unsichtbar, bis Sie mit dem Wischen fertig sind. Dann kann ich bestimmen, welches Feld gerade aktuell ist und es aus der richtigen Richtung kommen lassen (abhängig von der Richtung des Wischens).
  3. Eine dritte Option besteht darin, leere Felder mit einem Lade-Spinner als "duplizierte" oder Pufferfelder zu verwenden. Wenn Sie zu einem Panel wischen, das nicht zu den Originalen gehört, wird das Ladefeld blinken, bis Sie zum eigentlichen Panel bewegt werden.

Keine dieser Optionen ist ideal, also suche ich nach anderen Ideen. Aber wenn es keine guten Möglichkeiten gibt, scheint # 2 für mich der beste Plan zu sein.

    
thetallweeks 30.04.2014, 23:35
quelle

1 Antwort

0

Dies scheint eine Frage zu sein, den Status zwischen verschiedenen Instanzen eines Controllers zu teilen (das "echte" 1 Panel und das "falsche" "1" Panel) und es wurde schon einmal gefragt ....

Ich habe zwei Divs mit demselben ng-Controller in AngularJS, wie kann ich sie dazu bringen, Informationen auszutauschen?

Ich mag die Antwort, die darauf hindeutet, dass ein Dienst den Status zwischen Instanzen teilen soll ...

%Vor%

Hier ist eine Arbeitsgeige, die den Ansatz demonstriert

Ссылка

Michael

    
Michael Dausmann 20.05.2014 10:51
quelle