微信小程序侧滑删除

直接上干货吧

wxml

  
    
      
      
      
        
          {{item.name}}
        
        {{item.txts}}
      
    
    删除
  

wxss

view,label,textarea,input{box-sizing: border-box;}
.hd-con{width: 100%;height: auto;border-top: 1px solid #dfdfdf;}
.hd-con .listitem{width: 100%;height: 182rpx;position: relative;}
.hd-con .list{width: 100%;height: 182rpx;position: absolute;padding: 26rpx 22rpx;background-color: #ffffff;border-bottom: 1px solid #d9d9d9;left: 0;top: 0;transition: left 0.5s;z-index: 2;}
.hd-con .listitem.active .list{left: -90px;}
.hd-con .list .info{width: 100%;padding-left: 112rpx;padding-right: 30rpx;position: relative;}
.hd-con .list .info .toph{width: 100%;height: 80rpx;line-height: 80rpx;}
.hd-con .list .info .toph .name{display: inline-block;font-size: 34rpx;color: #1c7238;}
.hd-con .list .info .msgs{width: 100%;height: 50rpx;line-height: 50rpx;font-size: 28rpx;color: #333333;}
.hd-con .listitem .deleted{background-color: #ff6600;width: 90px;height: 182rpx;line-height: 182rpx;text-align: center;color: #fff;font-size:32rpx;position: absolute;right: 0;top: 0;z-index: 1;}
.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;-webkit-align-items:center}
.f_between{justify-content:space-between}
.f_around{justify-content:space-around}
.f_end{justify-content:flex-end}
.f_start{justify-content: flex-start;}
.f_center{justify-content:center}
.f_warp{-webkit-flex-wrap:wrap;-webkit-box-lines:multiple;-moz-flex-wrap:wrap;flex-wrap:wrap}
.f_relative{position:relative}
.flex_tel{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;flex:1;-webkit-flex:1}
.f_row{-ms-flex-direction: column;flex-direction: column;}
.f_line{-webkit-align-items:baseline;align-items:baseline;}

js代码

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    TestList: [],
    startX: 0, //开始坐标
    startY: 0,
    isTouchMove: false
  },
  onLoad: function () {
    //此方法模拟加载数据
    var that = this;
    that.getTestList();
  },
  getTestList: function () {
    var that = this;
    for (var i = 0; i < 10; i++) {
      var pagelist = {
        name: '测试名称' + i,
        txts: '测试内容测试内容测试内容测试内容'
      }
      that.data.TestList.push(pagelist);
      that.setData({
        TestList: that.data.TestList
      });
    }
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置所有删除
    this.data.TestList.forEach(function (v, i) {
      if (v.isTouchMove)//只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      TestList: this.data.TestList
    })
  },
  //滑动事件处理
  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.TestList.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({
      TestList: that.data.TestList
    })
  },
  /**
  * 计算滑动角度
  * @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);
  },
  /**
    *删除某个行
  */
  DelTestInfo: function (event) {
    //模拟删除数据
    var that = this;
    var idx = event.currentTarget.dataset.index;
    that.data.TestList.splice(idx, 1);
    //删除后更新数据
    that.setData({
      TestList: that.data.TestList
    });
  }
})