How to Implement Swipe‑to‑Delete in WeChat Mini Programs
This tutorial explains how to create a left‑swipe delete effect in a WeChat Mini Program list view by layering items, using absolute positioning, and handling touchstart, touchmove, and touchend events to move items and reveal action buttons based on swipe distance.
Demo
When an item in a list view is swiped left, two buttons appear on the right, allowing the user to delete or perform other actions.
Interaction Logic
If the swipe distance exceeds half the button width, releasing the finger slides the item fully left to reveal the buttons; otherwise the item returns to its original position, hiding the buttons.
Implementation Idea
Each list item consists of two layers: the upper layer holds the normal content, the lower layer contains the hidden buttons. The upper layer is positioned absolutely, and its left property is adjusted to follow the finger.
The WeChat Mini Program API provides a touch object and three event handlers ( touchstart, touchmove, touchend) to track finger movement and update the item position.
Page Layout
The layout is illustrated in the following image:
JavaScript Code
The core JavaScript code handling the touch events is shown in the images below:
That completes the implementation; feel free to comment with any issues.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.