How to Implement Swipe‑to‑Delete in WeChat Mini Programs

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.