vue移动端实现左划右划功能

1.安装插件vue-touch

npm install vue-touch@next --save

2.在main.js引入

import  VueTouch from 'vue-touch'
Vue.use(VueTouch,{name:'v-touch'})
VueTouch.config.swipe = {
  threshold:50  //设置左右滑动的距离
}

3.把实现左划右划的div包裹起来

 <v-touch @swipeleft="swiperLeft" @swiperight="swiperRight" class="wrapper">
      <div class="menu-container" ref="menuContainer">
 
      </div>
 </v-touch>

4.在methods中写入具体功能

 methods: {
      swiperLeft() {
        console.log(111);
        this.$router.push({ path: "/myVacation" });
      },
      swiperRight() {
        console.log(222);
        this.$router.back(-1); //返回前一页
      },
  },

接下来就可以实现这个功能了 ~~~     有时候还会出现报错 请参考下一篇文章