Optimizing Horizontal Swipe Interaction in Weex Shopping Cart

The Weex shopping‑cart component has been in production for over a year, and its long‑list swipe interaction has undergone extensive refinement. This article reviews the evolution of horizontal swipe handling.

Terminology : "List" – a vertically scrollable long list; "Card" – an item in the list; "Swipe" – left/right finger movement on a card; "Swipe button" – hidden actions (delete, collect) revealed by swipe; "Open animation" – card moves left to expose buttons; "Close animation" – card returns right; "Re‑swipe" – right swipe when buttons are shown; "Mutual exclusion" – opening one card closes any other opened card.

Why a front‑end cart? The cart must be open, customizable, and fast to iterate, allowing business teams to observe effects quickly.

Why swipe? Swipe adds a second interaction dimension to long lists, enabling instant item management (delete/collect) more efficiently than long‑press dialogs.

Why Weex? Existing Weex best‑practice knowledge and the need for rapid iteration made a Weex‑based cart the natural choice.

Layer design & animation flow : When a swipe is detected, the content area shifts left, revealing the button group. The animation states include: untouched, start swipe, release, and auto‑complete.

Early implementation ("Stone Age") : Simple CSS animation triggered after detecting a left swipe. The result felt laggy, lacked mutual exclusion, and did not reset automatically.

Improvements ("Bronze Age") : Initiate button rendering on page load, start CSS animation as soon as the finger moves, and close buttons when the list scrolls.

Further refinement ("Industrial Age") : Achieve follow‑finger ("follow‑hand") behavior, enforce mutual exclusion, and auto‑reset when scrolling. However, right‑swipe closing sometimes caused slight list jitter.

BindingX solution : Use BindingX to capture gestures at the native level, preventing container‑level conflicts and allowing precise angle thresholds (<30°) for swipe activation.

Edge‑case handling : Determine expand/close based on swipe velocity and final position; enforce angle limits to avoid accidental vertical scrolling; address recycling issues on low‑end devices by forcing offset reset after animation interruption.

Future outlook : Consider Spring‑based animations for smoother physics, though time constraints have delayed this research.

Overall, the article documents the step‑by‑step optimization of horizontal swipe in a Weex shopping cart, highlighting practical challenges and solutions for front‑end developers.