vue 手机右滑返回

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>
相关推荐
是一个Bug1 小时前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu121381 小时前
React面向组件编程
开发语言·前端·javascript
计算机毕设VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue二手家电管理系统(源码+数据库+文档)
vue.js·spring boot·后端·课程设计
持续升级打怪中2 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路2 小时前
GDAL 实现矢量合并
前端
hxjhnct2 小时前
React useContext的缺陷
前端·react.js·前端框架
冰暮流星2 小时前
javascript逻辑运算符
开发语言·javascript·ecmascript
前端 贾公子2 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗2 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全
前端工作日常3 小时前
我学习到的AG-UI的概念
前端