效果图

实现代码

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                  })              }          })        }      })    }})