微信小程序 右滑出现删除按钮

效果图

实现代码

wxml

<view class="contents">
    <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{recordList}}" wx:key="">
        <view class="content">
            <view class="content_name">{{item.nickname}}</view>
            <view class="content_time">{{item.birthday}}</view>
        </view>
        <view class="del" data-id="{{item.d_id}}"  data-status="{{item.status}}" catchtap="del" data-index="{{index}}">删除</view>
    </view>
</view>

wxss

.contents{
    width:100%;
    min-height: 100%;
    
  }
  .touch-item {
    height: 130rpx;
    width: 100%;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    display: flex;
    /* //均匀排布每个元素 */
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
  }
  .content {
   width: 100%;
   padding: 0 30rpx;
   /* margin-right:0; */
   -webkit-transition: all 0.4s;
   transition: all 0.4s;
   -webkit-transform: translateX(150rpx);
   transform: translateX(150rpx);
   margin-left: -150rpx;
   box-sizing: border-box;
  }
  .del {
    width: 150rpx;  
    height: 100%;  
    background-color: red; 
    color: white; 
    display: flex;  
    justify-content: center;  
    align-items: center;  
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .content_name{
    font-size: 28rpx;
    color: #333;
    line-height: 30rpx;
    margin: 30rpx 0 28rpx;
}
.content_time{
    color: rgb(153,153,153);
    font-size: 20rpx;
    line-height: 20rpx;
}
  .touch-move-active .content,
  .touch-move-active .del {
   -webkit-transform: translateX(0);
   transform: translateX(0);
  }

js

const app = getApp()
import { getJSON, postJSON } from '../../utils/server.js';
Page({
    data: {
      recordList: [],
      startX: 0, //开始坐标
      startY: 0
    },
    onLoad: function (options) {
      postJSON('wuxingHistory',{user_id:app.globalData.userId}, res => {
            if(res.data.code==0){
              let data = res.data.result
              this.setData({
                recordList: data
              })
          }
      })
    },
    //手指触摸动作开始 记录起点X坐标
    touchstart: function (e) {
      //开始触摸时 重置所有删除
      this.data.recordList.forEach(function (v, i) {
        if (v.isTouchMove)//只操作为true的
          v.isTouchMove = false;
      })
      this.setData({
        startX: e.changedTouches[0].clientX,
        startY: e.changedTouches[0].clientY,
        recordList: this.data.recordList
      })
    },
    //滑动事件处理
    touchmove: function (e) {
      var that = this,
        index = e.currentTarget.dataset.index,//当前索引
        startX = that.data.startX,//开始X坐标
        startY = that.data.startY,//开始Y坐标
        touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
        touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
        //获取滑动角度
        angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
      that.data.recordList.forEach(function (v, i) {
        v.isTouchMove = false
        //滑动超过30度角 return
        if (Math.abs(angle) > 30) return;
        if (i == index) {
          if (touchMoveX > startX) //右滑
            v.isTouchMove = false
          else //左滑
            v.isTouchMove = true
        }
      })
      //更新数据
      that.setData({
        recordList: that.data.recordList
      })
    },
    /**
     * 计算滑动角度
     * @param {Object} start 起点坐标
     * @param {Object} end 终点坐标
     */
    angle: function (start, end) {
      var _X = end.X - start.X,
        _Y = end.Y - start.Y
      //返回角度 /Math.atan()返回数字的反正切值
      return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    },
    //删除事件
    del: function (e) {
      postJSON('wuxingIsdelete',{d_id:e.currentTarget.dataset.id,status:e.currentTarget.dataset.status}, res => {
        if(res.data.code==0){
          postJSON('wuxingHistory',{user_id:app.globalData.userId}, res => {
              if(res.data.code==0){
                  let data = res.data.result
                  this.setData({
                    recordList: data
                  })
              }
          })
        }
      })
    }
})