原理：

其实是将百度touch.js引入到项目中 然后有滑动等事件 在事件中调用方法，vue-touch 地址：https://github.com/vuejs/vue-touch/tree/next

安装：

npm install vue-touch @ next

引入man.js(我引入的报错，找不到路径 手动改掉)

import VueTouch from 'vue-touch'

Vue.use(VueTouch, {name: 'v-touch'})

VueTouch.config.swipe = {

threshold: 100 //手指左右滑动距离

}

 下面是一个使用的例子 （使用提供的v-touch标签 就可以触动手势 根据不同的手势调用方法即可，swipeleft左滑事件）

<template>
    
      <div>
        <p>testRouter.vue</p>
      <v-touch v-on:swipeleft="swiperleft"  class="wrapper">left</v-touch>
      <v-touch  v-on:swiperight="swiperright" class="wrapper">right</v-touch>
   <div class="menu-container" ref="menuContainer">  
  <!-- 这个是内容 --> 
   </div>
        </div>   
</template>

<script>
 export default {
     data(){
         return{
             
         }
     },
    methods: {
    swiperleft: function () {
        console.info(111);
   this.$router.push({'path':'/b'});
  },
  swiperright: function () {
   this.$router.push({'path':'/a'});
   console.info(2222);
  }
    }
 }
</script>

<style>

</style>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2895