H5实现左右滑动手势

发布时间 2023-06-12 19:18:51作者: jiazq
  • 使用已有的轮子简单实现H5左右滑动手势
    1. 安装vue2-touch-events
      npm install vue2-touch-events
    2. main.js中引入
    // main.js
    import Vue2TouchEvents from 'vue2-touch-events'
    Vue.use(Vue2TouchEvents)
    
    1. 通过自定义指令使用
    <!-- template -->
    <!-- 需要监听左右滑动手势的dom -->
    <div v-touch:swipe="handleSwipe"></div>
    
    // methods方法
    handleSwipe (val) {
      if(val === 'left') {
        console.log('to left')
      } else if(val === 'right') {
        console.log('to righe')
      }
    }