js原生左滑删除

样式

 .list1_list {
    padding: 0;
    width: 100%;
    position: relative;
    transition: all 0.2s;

  }
  .layui-row span {
    display: inline-block;
    font-size: 15px;
    padding-top: 10px;
    margin-left: 10px;
  }
  .layui-row p {
    font-size: 16px;
    padding: 11px 0;
    margin-left: 10px;
  }
  /*删除按钮*/
  .list1_list .del {
    display: inline-block;
    width: 61px;
    height: 73px;
    border-radius: 0 0 8px 0;
    background: #DF1E31;
    text-align: center;
    line-height: 73px;
    position: absolute;
    top: 0;
    /*right: 0;*/
    right: -61px;
  }

样式 就是给删除按钮设置绝对定位 然后溢出隐藏

    <div class="layui-row list1_list ">

          <span>共享目标文件夹</span>
          <p>
            2022年/道外黎华旧改项目(五标段)
            <i class="layui-icon layui-icon-right " style="margin-left: 21%"></i>
          </p>
          <div class=" del" click-event="remove">
            <i class="layui-icon layui-icon-delete" style="font-size: 26px"></i>
          </div>

        </div>
        <div class="layui-row list1_list ">
          <div class="">
            <span>共享目标文件夹</span>
            <p>
              2022年/道外黎华旧改项目(五标段)
              <i class="layui-icon layui-icon-right " style="margin-left: 21%"></i>
            </p>
            <div class=" del" click-event="remove">
              <i class="layui-icon layui-icon-delete" style="font-size: 26px"></i>
            </div>
          </div>

        </div>

   var startX, endX, value;

    //监听全局的手指触摸事件 记录开始位置和 结束位置
    //距离大于30 先重置所有删除按钮的初始样式  然后设置删除按钮样式显示 
    
    //滑动开始
    $(document).on('touchstart', '.list1_list', function (e) {
      // console.log(e.originalEvent.touches[0].pageX)

      startX = e.originalEvent.touches[0].pageX
      // console.log(startX)
    })
    //滑动结束
    $(document).on('touchend', '.list1_list', function (e) {

      // console.log(e.originalEvent.changedTouches[0].pageX)
      endX = e.originalEvent.changedTouches[0].pageX
      value = startX - endX
      // console.log(value)
      if (value > 30) {
        // console.log(e.currentTarget)
        //置空别的滑动事件
        restSlide();
        e.currentTarget.style.left = '-61px';
      } else {
        // 右滑
        restSlide();
        e.currentTarget.style.left = '0px';
      }
      startX = 0;
      endX = 0;
    })
  
    //复位滑动状态
    restSlide = function () {
      let list = $(".list1_list");
      // 复位
      for (let i = 0; i < list.length; i++) {
        list[i].style.left = '0px';
        // console.log(list[i])
      }

    };