小程序左滑删除

保存之

wxml

<view class="container">
	<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="index">
		<view class="content">{{item.content}}</view>
		<view class="del" catchtap="del" data-index="{{index}}">删除</view>
            <view class="del" bindtap="er">哈哈</view>
	</view>
</view>

wxss

.touch-item {
      font-size: 26rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ccc;
      width: 100%;
      overflow: hidden;
      height:100rpx;
      margin-bottom:10rpx;
}

.content {
      width: 100%;
      padding: 10rpx;
      line-height: 40rpx;
      margin-right: 0;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transform: translateX(240rpx);
      transform: translateX(240rpx);
      margin-left: -240rpx;
}

.del {
      background-color: orangered;
      width: 120rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      -webkit-transform: translateX(240rpx);
      transform: translateX(240rpx);
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      border:1rpx solid #ccc;
}

.touch-move-active .content,.touch-move-active .del {
      -webkit-transform: translateX(0);
      transform: translateX(0);
}

js

var app = getApp()
Page({
  data: {
    items: [],
    startX: 0, //开始坐标
    startY: 0
  },
onLoad: function () {
      for (var i = 0; i < 5; 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) {
      var that = this 
      wx.showModal({
            title: '删除提示',
            content: '确定要删除吗',
            success (res) {
                  if (res.confirm) {
                        that.data.items.splice(e.currentTarget.dataset.index, 1)
                        that.setData({
                              items: that.data.items
                        })
                  } else if (res.cancel) {
                        console.log('用户点击取消')
                  }
            }
      })
},
//   第二事件
er(){
      wx.showToast({
            title: '第二个事件',
            icon: 'none',
            duration: 2000
      })
}




})