微信小程序实现左滑删除功能

1.wxml

<view class="shopBox" wx:for="{{shopList}}" wx:for-item="item" wx:key="{{index}}" wx:if="{{shopList.length>0}}">
  <view class="shopCon {{item.isTouchMove?'shopCon-active':''}}" data-index="{{index}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
  此处放正常显示的内容
  </view>
  <view class="shopDel {{item.isTouchMove?'shopDel-active':''}}" data-storeid="{{item.storeId}}" bindtap="delShop">删除</view>
</view>

2.wxss

//外面一层大盒子
.shopBox{
  width:100%;
  margin-bottom: 10px;
  display:flex;
  position: relative;
}
//内容盒子
.shopCon {
  width:100%;
  background-color: white;
  /* box-shadow: 0px 5px 15px rgba(231, 234, 240, 1); */
  padding: 13px 15px 8px 15px;
  box-sizing: border-box;
  display: flex;
  position:relative;
  left:0;
  transition: all 0.3s;
}
//删除按钮定宽，隐藏时按钮最右边距离大盒子最右端的距离是按钮的宽度
.shopDel{
  width:80px;
  height:100%;
  background-color: #ff6969;
  color:#fff;
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right:-80px;
  top:0;
  transition: all 0.3s;
}
//删除按钮显示时内容盒子位置左移一个删除按钮的宽度
.shopCon-active{
  left:-80px;
}
//删除按钮显示时删除按钮的位置左移一个删除按钮的宽度
.shopDel-active{
  right:0;
}

3.js

data: {
    shopList: null,
    // 设置开始的位置
    startX: 0,
    startY: 0,
  },
   onShow: function() {
    var _this = this;
   	//从服务端获取列表
    storeService.collectionList(function(data) {
      console.log(data.result)
      if (data.result && data.result.length > 0) {
        var temp = [];
        for (var i = 0; i < data.result.length; i++) {
          temp.push({
            pic: data.result[i].pic,
            name: data.result[i].name,
            address: data.result[i].address,
            totleCompartments: data.result[i].totleCompartments,
            storeId: data.result[i].storeId,
            isTouchMove: false,//每个元素加上这个字段用于判断删除按钮是否显示
          })
        }
      }
      _this.setData({
        shopList: temp
      })
    })
  },
   touchStart: function(e) {
    let dataList = [...this.data.shopList]
    dataList.forEach(item => {
      if (item.isTouchMove) {
        item.isTouchMove = !item.isTouchMove;
      }
    });
    this.setData({
      shopList: dataList,
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    })
  },
  touchMove: function(e) {
    let moveX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    let indexs = e.currentTarget.dataset.index;
    let dataList = [...this.data.shopList]

    let angle = this.angle({
      X: this.data.startX,
      Y: this.data.startY
    }, {
      X: moveX,
      Y: moveY
    });

    dataList.forEach((item, index) => {
      item.isTouchMove = false;
      // 如果滑动的角度大于30° 则直接return；
      if (angle > 30) {
        return
      }

      if (indexs === index) {
        if (moveX > this.data.startX) { // 右滑
          item.isTouchMove = false;
        } else { // 左滑
          item.isTouchMove = true;
        }
      }
    })

    this.setData({
      shopList: dataList
    })
  },
  //计算角度
  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);
  },

  // 删除
  delShop(e) {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确认删除此店铺？',
      success: function(res) {
        if (res.confirm) {
          console.log(e.currentTarget.dataset.storeid)
          let id = e.currentTarget.dataset.storeid;
          let dataList = [...that.data.shopList];

          for (let i = 0; i < dataList.length; i++) {
            const item = dataList[i];
            item.isTouchMove = false;
            if (item.storeId === id) {
              dataList.splice(i, 1);
              break;
            }
          }
          that.setData({
            shopList: dataList
          })
          var url = "store/store/collection?storeId=" + id;
          httpService.delete(url, function(res) {
            if (res.code == "200") {
              wx.showToast({
                title: '已删除',
              })
            } else {
              wx.showModal({
                content: res.message
              })
            }
          })
        }
      }
    })
  },