How Weex and BindingX Deliver Native‑Like Card Interactions in Mobile Taobao

When the traffic‑driven era of the mobile Taobao (hand‑taobao) ended, the team focused on refined operations and user‑experience upgrades. They needed a card‑style interaction that traditionally required pure native implementation, but chose to achieve it with Weex, a JavaScript‑based cross‑platform container.

Background

With diminishing traffic bonuses, retaining existing customers became paramount. The product shifted from CTR/GMV‑oriented metrics to fine‑grained operations aimed at longer session times and higher penetration. Upgrading the "Daily Good Store" (a main homepage module) to a new card interaction was essential.

Product Feature Breakdown

Horizontal card sliding with scaling during swipe.

Video card enlarges on upward swipe and shrinks when a down button is tapped.

Page background changes to the current card’s cover image as the card slides.

Navigation numbers update according to the active card.

Full‑screen page without the system navigation bar.

Cards feature rounded corners and shadows.

Video cover shows a breathing animation when not playing.

Implementation Process

Two implementation paths were considered: native development or a pure‑JS solution on the Weex container. Native would guarantee performance but required separate Android and iOS teams, duplicated code, and cumbersome release cycles.

Choosing Weex promised native‑like experience, rapid iteration, and a single‑front‑end codebase for multiple platforms.

Initial demos proved Weex could handle video scaling and card sliding, but a performance bottleneck appeared on Android: each touchmove triggered a native‑to‑JS round‑trip, and each move end required another round‑trip for re‑rendering, causing severe jank.

To solve this, the team designed a BindingX‑based approach: on touchstart, JS receives the native event and passes the subsequent move calculations as expressions to native, letting native execute the entire gesture without further JS involvement, thus eliminating the costly diff and cross‑call overhead.

Beyond this core fix, the team identified additional missing capabilities in Weex and contributed them back to the framework.

1. BindingX – Gesture‑Driven Transformations

BindingX enables expression‑based binding of multiple elements to a single gesture, allowing simultaneous background gradient changes, card scaling, and numeric roll‑overs during horizontal swipes.

Usage is straightforward: bind a pan event to the target element, then define expression relationships between the target and dependent elements.

2. NavBar Transparent – Full‑Screen Design Freedom

Appending wx_navbar_transparent=true to the URL makes the navigation bar transparent, while wx_navbar_hidden=true hides it entirely, giving designers full control over page navigation appearance.

3. NavBar Button Color – Adaptive Back‑Button Styling

When the navigation bar is transparent, its background matches the page, allowing button colors to be adjusted dynamically to maintain contrast.

4. Shadow – Enhanced Card Depth

Weex now supports shadow effects (via the Android elevation property) to give cards a more pronounced three‑dimensional feel.

5. Rounded Corners – Consistent Curvature Across Components

Applying border-radius to the outermost container now correctly rounds corners for all child elements, including video components, simplifying UI design.

6. Scrollable – Dynamic Scrolling Control

The scroller component gained a scrollable attribute, allowing developers to enable or disable scrolling programmatically.

7. Blur – Simple Frosted‑Glass Effect

Adding a filter style to an image creates a blur (frosted‑glass) effect, though intensity varies between Android and iOS.

8. Back‑Button Interception – Custom Navigation Logic

Before Weex provided native hash‑based routing, developers could intercept the back‑button event to manage history manually, enabling a pseudo‑single‑page experience.

Open‑Source Release

The BindingX solution has been open‑sourced to help other developers solve similar rich‑interaction challenges on Weex and React Native.

BindingX offers an "Expression Binding" mechanism that executes complex gestures at 60 fps without jank, and it is available as a plugin for both Weex and React Native.

Repository: https://alibaba.github.io/bindingx/guide/cn_introduce