<view class="container">

  <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">

   <view class="content">{{item.content}}</view>

   <view class="del" catchtap="del" data-index="{{index}}">删除</view>

  </view>

 </view>

 .touch-item {

  font-size: 14px;

  display: flex;

  justify-content: space-between;

  border-bottom:1px solid #ccc;

  width: 100%;

  overflow: hidden

 }

 .content {

  width: 100%;

  padding: 10px;

  line-height: 22px;

  margin-right:;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  margin-left: -90px

 }

 .del {

  background-color: orangered;

  width: 90px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

 }

 .touch-move-active .content,

 .touch-move-active .del {

  -webkit-transform: translateX(0);

  transform: translateX(0);

 }

 var app = getApp()

 Page({

  data: {

   items: [],

   startX: 0, //开始坐标

   startY: 0

  },

  onLoad: function () {

   for (var i = 0; i < 10; i++) {

    this.data.items.push({

     content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",

     isTouchMove: false //默认全隐藏删除

    })

   }

   this.setData({

    items: this.data.items

   })

  },

  //手指触摸动作开始 记录起点X坐标

  touchstart: function (e) {

   //开始触摸时 重置所有删除

   this.data.items.forEach(function (v, i) {

    if (v.isTouchMove)//只操作为true的

     v.isTouchMove = false;

   })

   this.setData({

    startX: e.changedTouches[0].clientX,

    startY: e.changedTouches[0].clientY,

    items: this.data.items

   })

  },

  //滑动事件处理

  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.items.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({

    items: that.data.items

   })

  },

  /**

   * 计算滑动角度

   * @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) {

   this.data.items.splice(e.currentTarget.dataset.index, 1)

   this.setData({

    items: this.data.items

   })

  }

 })