关于v-touch插件上下滑动事件

一：安装

1、npm install vue-touch@next -S

二： main.js引入

1、import VueTouch from 'vue-touch'

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

三：参考代码

<template>
  <v-touch v-on:swipeup="swiperup" v-on:swipedown="swiperdown" class="wrapper v-touch" tag="div">
  </v-touch>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    swiperup: function () {
      this.$router.push({ path: '/media' })
    },
    swiperdown: function () {
      this.$router.push({ path: '/index' })
    }
  }
}
</script>
<style lang="scss" scoped>
.v-touch{
    height: 100vh;
    background: greenyellow;
}
</style>

四：注意

v-touch要有高度撑开才能生效上下滑动事件，最新的不需要加

.v-touch {
    touch-action: pan-y !important;
  }