微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】

最新推荐文章于 2026-05-09 14:42:00 发布

原创

最新推荐文章于 2026-05-09 14:42:00 发布 · 4.4k 阅读

本文记录了小程序左滑删除效果的实现过程。介绍了实现效果，如左滑显示删除按钮、点击删除记录、右滑取消等。阐述设计思路，包括页面分层、元素移动属性及使用微信小程序api实现视图跟随手指移动。还给出代码实现，最后提及WeUI组件库的左滑删除组件。

前言：

现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。

效果图：

实现效果
删除后的效果

实现效果：

当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。
当我们点击删除按钮时，就会把该条记录删除掉。
如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。

设计思路：

首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容；
元素移动使用的是 transform 属性；
这里用到的微信小程序的 api 是 touch 的相关事件：touchstart和touchmove 来实现 view 视图跟随手指移动。微信小程序 - 事件
在 touchstart 时，通过clientX, clientY或者pageX, pageY 来监听记录触摸开始时的（x, y）的位置；在 touchMove 中持续监听触摸点（x, y）的位置，并且记录下来。之后再对开始的触摸位置和结束的触摸位置进行逻辑的判断，如果移动距离大于开始的距离，那么就是右滑，将data数据中的isTouchMove 置为 false 不进行展示；如果移动距离小于开始的位置，那么就是左滑，将isTouchMove置为 true，页面中的按钮就会展示出来，可以进行删除等其他操作。

上面就是实现的思路，废话不多说，直接上代码了。

代码实现：

wxml 代码：

// touch.wxml
<view class="records_row" wx:for="{
    
    {records}}" wx:key="index">
  <view class="records_row_content {
    
    {item.isTouchMove ? 'touch_move' : ''}}" data-index="{
    
    {index}}"
    bindtouchstart="touchStart" bindtouchmove="touchMove">
    <view class="records_row_left"></view>
    <view class="records_content">
      <view class="records_bs">
        {
  
  {item.identification}}
      </view>
      <view class="records_time">
        {
  
  {item.time}}
      </view>
    </view>
    <view class="records_del" catchtap="del" data-index="{
    
    {index}}">删除</view>
  </view>
</view>

wxss 代码：

.records_row {
   
   
  width: 710rpx;
  height: 152rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 16rpx 0px #EAEAEA;
  border-radius: 12rpx;
  margin-top: 24rpx