vue 手机右滑返回

前端猫

于 2024-07-18 09:42:02 发布

阅读量54

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_60559048/article/details/140513157

版权

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 v-touch:right="backBefore">
    
  </div>
</template>
 
<script>
 export default {
        name: "index",
        data(){
           
        },
        methods:{
          backBefore (e,start,end){ 
            // 滑动距离
             if（end.X>start.X && end.X-start.X>30){
                   //要跳转的页面

              }
             
           }
 
        }
</script>