移動端左滑刪除在ios10以下兼容處理

項目購物車要實現左滑刪除，網上找了一個組件，用起來很方便，但是在ios10以下滑動不了

https://segmentfault.com/a/1190000011062124

下面是這個大哥的代碼：

<template>
  <div>
    <div class="slider-item" data-type="0">
      <div class="content"
        @touchstart='touchStart'
        @touchmove='touchMove'
        @touchend='touchEnd'
        :style="deleteSlider"
      >
        <!-- 插槽中放具體項目中需要內容         -->
        <slot></slot>
      </div>
      <div class="remove" ref='remove' @click.prevent="deleteItem()">
        <span>刪除</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startX: 0, //觸摸位置
      endX: 0, //結束位置
      moveX: 0, //滑動時的位置
      disX: 0, //移動距離
      deleteSlider: "", //滑動時的效果,使用v-bind:style="deleteSlider"
      lastIndex: "",
      startY: 0, //觸摸位置
      endY: 0, //結束位置
      moveY: 0 //滑動時的位置
    };
  },
  methods: {
    touchStart(ev) {
      this.restSlide();
      ev = ev || event;
      //tounches類數組，等於1時表示此時有隻有一隻手指在觸摸屏幕
      if (ev.touches.length == 1) {
        // 記錄開始位置
        this.startX = ev.touches[0].clientX;
        this.startY = ev.touches[0].clientY;
      }
    },
    touchMove(ev) {
      ev = ev || event;
      let parentElement = ev.currentTarget.parentElement;
      //獲取刪除按鈕的寬度，此寬度爲滑塊左滑的最大距離
      let wd = this.$refs.remove.offsetWidth;
      if (ev.touches.length == 1) {
        // 滑動時距離瀏覽器左側實時距離
        this.moveY = ev.touches[0].clientY;
        this.moveX = ev.touches[0].clientX;
        if (Math.abs(this.moveY - this.startY) < 30) {
          //起始位置減去 實時的滑動的距離，得到手指實時偏移距離
          this.disX = this.startX - this.moveX;
          // 如果是向右滑動或者不滑動，不改變滑塊的位置
          if (this.disX < wd / 2 || this.disX == 0) {
            this.deleteSlider = "transform:translateX(0px)";
            parentElement.dataset.type = 0;
            // 大於0，表示左滑了，此時滑塊開始滑動
          } else if (this.disX > wd / 2) {
            ev.preventDefault();
            //具體滑動距離我取的是 手指偏移距離*5。
            parentElement.dataset.type = 1;
            this.deleteSlider = "transform:translateX(-" + this.disX + "px)";
            // 最大也只能等於刪除按鈕寬度
            if (this.disX * 1.5 >= wd) {
              parentElement.dataset.type = 1;
              this.deleteSlider = "transform:translateX(-" + wd + "px)";
            }
          }
        }
      }
    },
    touchEnd(ev) {
      // this.canScroll();
      ev = ev || event;
      let parentElement = ev.currentTarget.parentElement;
      let wd = this.$refs.remove.offsetWidth;
      if (ev.changedTouches.length == 1) {
        let endY = ev.changedTouches[0].clientY;
        if (Math.abs(this.startY - endY) < 30) {
          let endX = ev.changedTouches[0].clientX;
          this.disX = this.startX - endX;
          //如果距離小於刪除按鈕一半,強行回到起點
          if (this.disX < wd / 2) {
            parentElement.dataset.type = 0;
            this.deleteSlider = "transform:translateX(0px)";
          } else {
            //大於一半 滑動到最大值
            parentElement.dataset.type = 1;
            this.deleteSlider = "transform:translateX(-" + wd + "px)";
          }
        }
      }
    },
    restSlide() {
      let listItems = document.querySelectorAll(".slider-item");
      // 復位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].firstChild.style = "transform:translateX(0" + "rem)";
      }
    },
    deleteItem: function() {
      this.$emit("deleteItem", "0000");
      this.deleteSlider = "transform:translateX(0" + "rem)";
    }
  }
};
</script>
<style scoped lang="less">
.slider-item {
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  .content {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    // 設置過渡動畫
    transition: 0.3s;
  }
  .remove {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 0.5rem;
    height: 97%;
    background: red;
    right: 0.01rem;
    top: 0.01rem;
    color: #fff;
    text-align: center;
    font-size: 0.14rem;
    img {
      width: 0.28rem;
      height: 0.28rem;
    }
    span {
      display: block;
      margin-top: 0.08rem;
      color: #fff;
      font-size: 0.14rem;
    }
  }
}
</style>

由於touchstart等事件在ios10以下都不觸發，自己也沒找到原因，最終解決辦法是以事件監聽addEventListener得以解決，解決後的代碼如下：

<template>
<div>
  <div class="slider-item" data-type="0">
    <div class="content"
      :style="deleteSlider"
    >
      <!-- 插槽中放具體項目中需要內容         -->
      <slot></slot>
    </div>
    <div class="remove" ref='remove' @click.prevent="deleteItem()">
      <span>刪除</span>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startX: 0, //觸摸位置
      endX: 0, //結束位置
      moveX: 0, //滑動時的位置
      disX: 0, //移動距離
      deleteSlider: "", //滑動時的效果,使用v-bind:style="deleteSlider"
      lastIndex: "",
      startY: 0, //觸摸位置
      endY: 0, //結束位置
      moveY: 0 //滑動時的位置
    };
  },
  mounted() {
    let _this = this;
    let contents = document.getElementsByClassName('content');
     for (let i = 0; i <  contents.length; i++) {
      contents[i].addEventListener('touchstart', function(ev) {
        for (let j = 0; j < contents.length; j += 1) {
          contents[j].style.webkitTransform  = "translateX(0px)";
        }
        ev = ev || event;
        //tounches類數組，等於1時表示此時有隻有一隻手指在觸摸屏幕
        //alert('ev.touches.length', ev.touches.length)
        if (ev.targetTouches.length == 1) {
          // alert('6666')
          // 記錄開始位置
          _this.startX = ev.targetTouches[0].clientX;
          _this.startY = ev.targetTouches[0].clientY;
        }
      });
      contents[i].addEventListener('touchmove',function(ev) {
      //alert('0000')
      ev = ev || event;
      let parentElement = ev.currentTarget.parentElement;
      //獲取刪除按鈕的寬度，此寬度爲滑塊左滑的最大距離
      let wd = _this.$refs.remove.offsetWidth;
      if (ev.targetTouches.length == 1) {
        // 滑動時距離瀏覽器左側實時距離
        _this.moveY = ev.targetTouches[0].clientY;
        _this.moveX = ev.targetTouches[0].clientX;
        if (Math.abs(_this.moveY - _this.startY) < 30) {
          //起始位置減去 實時的滑動的距離，得到手指實時偏移距離
          _this.disX = _this.startX - _this.moveX;
          // 如果是向右滑動或者不滑動，不改變滑塊的位置
          if (_this.disX < wd / 2 || _this.disX == 0) {
            //_this.deleteSlider = "transform:translateX(0px)";
            contents[i].style.webkitTransform  = "translateX(0px)";
            parentElement.dataset.type = 0;
            // 大於0，表示左滑了，此時滑塊開始滑動
          } else if (_this.disX > wd / 2) {
            ev.preventDefault();
            //具體滑動距離我取的是 手指偏移距離*5。
            parentElement.dataset.type = 1;
            //_this.deleteSlider = "transform:translateX(-" + _this.disX + "px)";
            contents[i].style.webkitTransform  = "translateX(-" + _this.disX + "px)";
            // 最大也只能等於刪除按鈕寬度
            if (_this.disX * 1.5 >= wd) {
              parentElement.dataset.type = 1;
             // _this.deleteSlider = "transform:translateX(-" + wd + "px)";
              contents[i].style.webkitTransform  = "translateX(-" + wd + "px)";

            }
          }
        }
      }
    });
    contents[i].addEventListener('touchend', function(ev) {
      // alert('走了')
      ev = ev || event;
      let parentElement = ev.currentTarget.parentElement;
      let wd = _this.$refs.remove.offsetWidth;
      if (ev.changedTouches.length == 1) {
        let endY = ev.changedTouches[0].clientY;
        if (Math.abs(_this.startY - endY) < 30) {
          let endX = ev.changedTouches[0].clientX;
          _this.disX = _this.startX - endX;
          //如果距離小於刪除按鈕一半,強行回到起點
          if (_this.disX < wd / 2) {
            parentElement.dataset.type = 0;
            //_this.deleteSlider = "transform:translateX(0px)";
            contents[i].style.webkitTransform  = "translateX(0px)";
          } else {
            //大於一半 滑動到最大值
            parentElement.dataset.type = 1;
            //contents[i].deleteSlider = "transform:translateX(-" + wd + "px)";
            contents[i].style.webkitTransform  = "translateX(-" + wd + "px)";
          }
        }
      }
    })
      }
  },
  methods: {
    deleteItem: function() {
      this.$emit("deleteItem", "0000");
      this.deleteSlider = "transform:translateX(0" + "rem)";
    },
  }
};
</script>
<style scoped lang="less">
.slider-item {
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  .content {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    // 設置過渡動畫
    transition: 0.3s;
  }
  .remove {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 0.5rem;
    height: 97%;
    background: red;
    right: 0.01rem;
    top: 0.01rem;
    color: #fff;
    text-align: center;
    font-size: 0.14rem;
    img {
      width: 0.28rem;
      height: 0.28rem;
    }
    span {
      display: block;
      margin-top: 0.08rem;
      color: #fff;
      font-size: 0.14rem;
    }
  }
}
</style>

希望能對大家有所幫助，謝謝。