Onsen, wie Teilwischen auf Artikel

Question

Ich verwende AngularJS und Onsen Rahmen für die Entwicklung einer mobilen App. Ich habe jedem Element einer Liste einen Swipe hinzugefügt. Der Code ist wie this

Hier ist der Ausgang:

Ich mag würde eine teilweise Swipe haben, nicht insgesamt. Ich meine, so etwas wie dieses:

Wissen Sie, wenn ich das mit Onsen tun können, oder jede andere Abhilfe? Wissen Sie außerdem, wie Sie Swipe von rechts statt von links aktivieren können?

Answer 1

Left Menu Lösung:

Technisch gibt es eine Option, um die Objektgröße für das Karussell zu setzen, aber vielleicht einfacher, es wird genau das Karussell kleiner zu machen und mit der Größe der Gegenstände betrügen. Demo 1

ons-carousel { 
    width: 25% !important; 
    overflow: visible !important; 
} 
.list-action-item { 
    width: 400% !important; 
} 

Es ist hässlich, aber es ist so ziemlich 2 Zeilen CSS ohne Denken. : Auf der anderen Seite D

Recht Menu Lösung

das Menü haben Sie die initial-index="1" einfach entfernen und das Element und Menü Orte im html tauschen. Danach kannst du es wieder mit etwas CSS cheaten, je nachdem, was du erreichen willst. Demo 2

In dieser Demo hatte ich auch zuerst transform: none zum ersten Artikel hinzugefügt, denkend, dass es auf diese Weise besser aussieht. Ohne dass die Elemente wie gewohnt streichen. Aber wenn du das tust, dann kannst du den Gegenstand beim Wischen möglicherweise nicht sehen, weshalb ich die Bewegung ursprünglich deaktiviert habe.

Rechts Menu Lösung 2

Für die item-width Attribut - wie man sehen kann es sich um ein Attribut für das Karussell ist, aber es ist für alle Einzelteile. Die Art und Weise, wie das Karussell hergestellt wurde, erwartet, dass alle Artikel die gleiche Größe haben. Sie können die Breite eines Elements mit CSS einstellen, wenn Sie wollen, aber das Problem ist, dass die Karussell-Logik.

Wenn Sie wollen, dass es sich normal verhält, haben Sie eine feste Breite für die Elemente mit item-width, ändern Sie die Größe der ersten mit css und fügen Sie Dummy-Elemente direkt danach für die Karusselllogik hinzu.

Die Existenz von Dummies sind da, so dass das Auto-Scroll-Lock in die richtigen Stellen einrastet. Demo 3

Hinweise

Und wenn das, was Sie tun möchten, ist zu tun nur eine Teil Swipe aber immer noch die gleiche Objektgröße können Sie einfach das Entfernen auto-scroll Attribut und dann wird es nicht Autoscroll zu dem ganzen Gegenstand.

Auch wenn Sie denken, dass einige der Funktionen, die Sie möchten, viele Benutzer ansprechen können, dann fühlen Sie sich frei zu sagen, wie Sie die API für sie sein möchten, und es könnte in Zukunft in Betracht gezogen werden.