微信小程序左滑删除的两种表现方式

今天做小程序开发要实现左滑删除，借鉴了网上大佬们的代码，自己再做了代码补充实现功能，以此为记录
第一种：

wxml：

 <view style="margin-top:20rpx;background:#ffffff;position: relative;" >
        <navigator url="../details/details?id={{item.id}}" class="weui-media-box weui-media-box_appmsg blo"   style="{{item.txtStyle}}" hover-class="weui-cell_active" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"  data-index="{{index}}">
          <view class="weui-media-box__hd weui-media-box__hd_in-appmsg" style="position: relative;">
            <image class="weui-media-box__thumb" src="../../images/gray-default.png" wx:if="{{item.image==null || item.image==''}}" />
            <image class="weui-media-box__thumb" src="{{item.image}}" wx:if="{{item.image!=null && item.image!=''}}" />
            <view class="tag" style="{{item.type==1?'background:#E0474E;':''}}">{{item.type==0?'求购':'供应'}}</view>
          </view>
          <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <view class="weui-media-box__title">{{item.title}}</view>
            <view class="onr">
              <text class="date">{{item.createtime}}</text>
              <text class="address">{{item.province}}-{{item.city}}</text>
            </view>
            <view class="blo">
              <text class="money" style="{{item.price==0?'font-size:32rpx':''}}">{{item.price==0?"电话或面议":'￥'+item.price}}</text>
              <image class="renzheng" src="{{userInfo.vippic}}" wx:if="{{userInfo.endtime != null && userInfo.endtime >= now}}"></image>
            </view>
          </view>
        </navigator>
         <view class="posit" style="{{item.btnStyle}}">
            <view class="del" data-id="{{item.id}}" data-status="{{qie}}" bindtap="deletePublish">删除</view>
        </view>
      </view>

css:

/* 左滑 */
.posit{
  position:absolute;
  width:150rpx;
  height: 100%;
  background:#E0474E;
  top:0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

js:

 data: {
    ordering: [],
    delBtnWidth: 150 //删除按钮宽度单位（rpx）
  },
  //手指刚放到屏幕触发
  touchS: function(e) {
    console.log("touchS" + e);
    //判断是否只有一个触摸点
    if (e.touches.length == 1) {
      this.setData({
        //记录触摸起始位置的X坐标
        startX: e.touches[0].clientX
      });
    }
  },
  //触摸时触发，手指在屏幕上每移动一次，触发一次
  touchM: function(e) {
    console.log("touchM:" + e);
    var that = this
    if (e.touches.length == 1) {
      //记录触摸点位置的X坐标
      var moveX = e.touches[0].clientX;
      //计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.startX - moveX;
      //delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = that.data.delBtnWidth;
      var txtStyle = "";
      var btnStyle = "";
      if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
        txtStyle = "left:0px";
        btnStyle = "right:-" + delBtnWidth + "rpx;";
      } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "rpx";
        btnStyle = "right:-" + (delBtnWidth - disX) + "rpx;";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "rpx";
          btnStyle = "right:0rpx";
        }
      }
      //获取手指触摸的是哪一个item   
      var index = e.currentTarget.dataset.index;
      var list = that.data.ordering;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;
      list[index].btnStyle = btnStyle;
      //更新列表的状态
      this.setData({
        ordering: list
      });
    }
  },
  touchE: function(e) {
    console.log("touchE" + e);
    var that = this;
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标 
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0px";
      var btnStyle = disX > delBtnWidth / 2 ? "right:0px;" : "right:-" + delBtnWidth + "rpx;";
      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.ordering;
      list[index].txtStyle = txtStyle;
      list[index].btnStyle = btnStyle;
      //更新列表的状态
      that.setData({
        ordering: list
      });
    }
  },
  showOrder: function(a) {
    var t = this;
    wx.showLoading({
      title: '加载中',
    })
    // status    0 审核中  1 未通过  2 已发布   
    if (t.data.currentPage <= t.data.totalPage) {
      publish.getMyOrder({
        "status": a.status,
        "page": a.page
      }).then((data) => {
        if (data.data.totalpage != 0) {
          data.data.data.forEach((item, index) => {
            item.price = item.price.slice(0, -3)
            item.price = util.toThousands(item.price),
            item.btnStyle = "right:-" + t.data.delBtnWidth + "rpx;"
          })
          t.setData({
            ordering: t.data.ordering.concat(data.data.data),
            totalPage: data.data.totalpage,
            clickStautus: false,
            isShow: true
          })
        } else {
          t.setData({
            clickStautus: false,
            isShow: true
          })
        }
      }).catch((err) => {
        t.setData({
          clickStautus: false
        })
        wx.showModal({
          title: '提示',
          content: err.msg,
        })
      })
    }
  },
  deletePublish: function(e) {
    var t = this,
      id = e.currentTarget.dataset.id,
      status = e.currentTarget.dataset.status;
    wx.showModal({
      title: '提示',
      content: '是否确认删除？',
      success: function(res) {
        if (res.confirm) {
          publish.deleteOrder({
            id: id
          }).then((data) => {
            t.data.ordering = [];
            t.showOrder({
              status: status,
              order_id: '',
              page: 1
            });
            t.setData({
              ordering: t.data.ordering
            })
            wx.showToast({
              title: "删除成功",
            })
          }).catch((err) => {})
        }
      }
    })
  },

第二种

wxml：

  <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}"  style="background:#ffffff;" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
      <navigator url="../details/details?id={{item.order_id}}" class="weui-media-box weui-media-box_appmsg blo" hover-class="weui-cell_active">
        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg" style="position:relative;">
          <image class="weui-media-box__thumb" src="../../images/gray-default.png" wx:if="{{item.image==null || item.image==''}}" />
          <image class="weui-media-box__thumb" src="{{item.image}}" wx:if="{{item.image!=null && item.image!=''}}" />
          <view class="tag" style="{{item.type==1?'background:#E0474E;':''}}">{{item.type==0?'求购':'供应'}}</view>
        </view>
        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
          <view class="weui-media-box__title">{{item.title}}</view>
          <view class="onr">
            <text class="date">{{item.createtime}}</text>
            <text class="address">{{item.province}}-{{item.city}}</text>
          </view>
          <view class="blo">
            <text class="money" style="{{item.price==0?'font-size:32rpx':''}}">{{item.price==0?"电话或面议":'￥'+item.price}}</text>
            <image class="renzheng" src="{{item.vippic}}" wx:if="{{item.vippic}}"></image>
          </view>
        </view>
      </navigator>
       <view class="del" data-id="{{item.order_id}}" bindtap="deleteCollection">删除</view>
    </view>

css:

.touch-item {
 font-size: 14px;
 display: flex;
 justify-content: space-between;
 border-bottom:1px solid #ccc;
 width: 100%;
 overflow: hidden
}
 
.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);
}

js:

Page({
  data: {
    currentPage: 1,
    totalPage: 1,
    collectionList: [],
    isShow: false,
    startX: 0, //开始坐标
    startY: 0

  },
  onLoad: function() {
    var t = this;
    t.setData({
      userInfo: collection.app.globalData.userInfo,
      width: collection.app.globalData.windowHeight
    })
    t.myCollection(t.data.currentPage)
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置所有删除
    this.data.collectionList.forEach(function (v, i) {
      if (v.isTouchMove)//只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      collectionList: this.data.collectionList
    })
  },
  //滑动事件处理
  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.collectionList.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({
      collectionList: that.data.collectionList
    })
  },
  /**
   * 计算滑动角度
   * @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);
  },

  // 获取收藏列表
  myCollection: function(a) {
    var t = this;
    wx.showLoading({
      title: '加载中',
    })
    if (t.data.currentPage <= t.data.totalPage) {
      collection.getMyCollection({
        page: a
      }).then((data) => {
        if (data.data.data.length > 0) {
          data.data.data.forEach((item, index) => {
            item.price = item.price.slice(0, -3)
            item.price = util.toThousands(item.price)
            item.isTouchMove= false //默认全隐藏删除
          })
          t.setData({
            collectionList: t.data.collectionList.concat(data.data.data),
            totalPage: data.data.totalpage,
            isShow: true
          })
        } else {
          t.setData({
            isShow: true
          })
        }
      }).catch((err) => {})
    }
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    var t = this;
    t.data.collectionList = [];
    t.data.totalpage = 1;
    t.data.currentPage = 1;
    t.myCollection(1);
    // 停止下拉动作
    wx.stopPullDownRefresh();
  },
  // 上拉加载
  onReachBottom: function() {
    var t = this;
    t.data.currentPage++;
    if (t.data.currentPage > t.data.totalPage) {
      wx.hideLoading();
      t.data.currentPage = t.data.totalPage;
    } else {
      wx.showLoading({
        title: '加载中',
      })
      t.myCollection(t.data.currentPage);
    }
  },
  // 取消收藏
  deleteCollection: function(e) {
    var t = this,
      id = e.currentTarget.dataset.id;
    wx.showModal({
      title: '提示',
      content: '是否取消收藏？',
      success: function(res) {
        if (res.confirm) {
          collection.deleteCollection({
            order_id: id
          }).then((data) => {
            t.data.collectionList = [];
            for (var i = 1; t.data.currentPage >= i; i++) {
              t.myCollection(i);
            }
            wx.showToast({
              title: "取消成功",
            })
          }).catch((err) => {})
        }
      }
    })
  }
})