Vue App右滑屏幕返回上一页

1、安装vue-directive-touch组件

npm install vue-directive-touch --save

2、引入组件

在main.js中引入vue-directive-touch

import touch from 'vue-directive-touch';
Vue.use(touch);

3、在需要的页面使用

<template>
  <div id="wrop" v-touch:right="backBefore">
    
  </div>
</template>

<script>
 export default {
        name: "index",
        data(){
           
        },
        methods:{
           backBefore(){
               //要跳转的页面
           }

        }
</script>

4、扩展

vue-directive-touch提供了以下事件类型：

• 单击： v-touch:tap
• 长按： v-touch:long
• 左滑： v-touch:left
• 右滑： v-touch:right
• 上滑： v-touch:up
• 下滑： v-touch:down