微信小程序左滑刪除（簡易教學）

效果圖如下所示


仿京東微信小程序視頻請加QQ:1010753897
下載地址：https://download.csdn.net/download/qq_43764578/12314561

.wxml

<view class="box">
  <view class="item {{status ? '' :'active'}}">
    <view class="centent" bindtouchstart="touchS" bindtouchmove="touchM">
      內容
    </view>
    <view class="del-button">
      刪除
    </view>
  </view>
</view>

.wxss

page{
  background-color: #f7f7f7;
}
view{
  box-sizing: border-box;
}
.box{
  height: 100%;
}
.item{
  position:relative;
  top: 0;
  width: 100%;
  height: 240rpx;
  border-bottom: #d9d9d9 solid 1rpx;
  padding: 0;
}
.centent{
  width: 100%;
  height: 100%;
  background-color: #39b54a;
  line-height: 240rpx;
  text-align: center;
  color: #fff;
  position: relative;
  left: 0;
  transition: all 0.3s;
}
.item .del-button {
  position: absolute;
  right: -140rpx;
  width: 140rpx;
  height: 100%;
  background-color: #EE0A24;
  color: #fff;
  top: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  font-size: 24rpx;
}
.item.active .centent{
  left: -140rpx;
}
.item.active .del-button{
  right: 0;
}

.js

Page({
  data: {
    status: true
  },
  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
      })
    }
  },
})

有什麼問題歡迎評論留言，我會及時回覆你的