Vue App右滑屏幕返回上一页

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/QQ_Empire/article/details/100990965

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