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

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

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 = "&#