vant swiper 监听左滑右滑&禁止左滑功能

前言：个别需求会要求禁止swiper的左滑或者右滑功能，虽然原生swiper可支持，但因版本问题，个别引用有问题；或者此时功能已开发完成，再换组件开发成本较大，所以需要再vant的基础上进行兼容。具体实现如下

<van-swipe class="my-swipe" style="height: 200px;" vertical :touchable='touchable' @change='changeSwipe'>
  <van-swipe-item  
   @touchstart="onTouchStart" 
   @touchmove="onTouchMove" 
   @touchend="onTouchEnd(index)">1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>


<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

// data中
startX: null,
touchAble: true, // 是否可通过触摸滑动

// methods中
// 记录每次滑动位置
changeSwipe(index){
  // index即为改变后的页面索引，可写需要操作
}
// 记录初始滑动位置
 onTouchStart (e) {
   e = e || event
   e.preventDefault()
   if(e.touches.length == 1 ) {
     this.startX = e.touches[0].clientX
   }
},
 // 记录每次滑动位置
 onTouchMove (e) {
   e = e || event
   e.preventDefault()
   let surrentStartX 
   if(e.touches.length == 1 ) {
     surrentStartX = e.touches[0].clientX
   }
   if(surrentStartX < this.startX ) {
     // 右滑
     this.touchAble = true
     this.$refs.vantSwiper.resize()
   } else {
     // 左滑
     this.touchAble = false
     this.$refs.vantSwiper.resize()
   }
 },
 onTouchEnd (position) {
 
 },

移动端各种事件整理参考网址：https://www.cnblogs.com/imwtr/p/5882166.html