前端实现上滑下滑左滑右滑

1.首先我们借助一个插件v-touch

   安装:npm install vue-touch@next -S

2.在main.js里面引入

    import VueTouch from 'vue-touch'

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

3.分别对应四个事件

 swiperup   swiperdown  swiperLeft  swiperRight

4.html页面

   <v-touch @swipeleft="swiperLeft" @swiperight="swiperRight" @swiperup="swiperup" @swiperdown="swiperdown">

5.在menthods里面定义对应的方法操作

   

 methods: {
    swiperup: function () {
      this.$router.push({ path: '/media' })
    },
    swiperdown: function () {
      this.$router.push({ path: '/index' })
    }
  }