微信小程序左滑删除效果的实现

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content" bindtouchstart="touchS" bindtouchmove="touchM">显示正常内容</view>
  <view class="del-button">删除</view>
 </view>
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    status:true //true为正常显示，false为显示删除按钮
  },
  touchS(e) {
    // 获得起始坐标
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
   }, 
   touchM(e) {
    // 获得当前坐标
    this.currentX = e.touches[0].clientX;
    this.currentY = e.touches[0].clientY;
    const x = this.startX - this.currentX; //横向移动距离
    const y = Math.abs(this.startY - this.currentY); //纵向移动距离，若向左移动有点倾斜也可以接受
    if (x > 35 && y < 110) {
    //向左滑是显示删除
     this.setData({
      status: false
     })
    } else if (x < -35 && y < 110) {
    //向右滑
     this.setData({
      status: true
     })
    }
   },
})

/* pages/del/del.wxss */
.box{
  height: 100%;
 }
 .item{
  position:relative;
  top: 0;
  width: 100%;
  height: 150rpx;
  border-bottom: #d9d9d9 solid 1rpx;
  padding: 0;
 }
 .item .content{
  background-color: #ffffff;
  height: 100%;
  position: relative;
  left: 0;
  width: 100%;
  transition: all 0.3s;
  line-height: 140rpx;
 }
 .item .del-button {
  position: absolute;
  right: -140rpx;
  width: 140rpx;
  height: 100%;
  background-color: #df3448;
  color: #fff;
  top: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  font-size: 24rpx;
 }
 .item.active .content{
  left: -140rpx;
 }
 .item.active .del-button{
  right: 0;
 }

https://www.ddpool.cn/article/67940.html