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>
相关推荐
特创数字科技17 小时前
一个纯本地运行的图片处理工具:压缩 / 裁剪 / 九宫格 / 圆角 / 滤镜 / 拼图 / 水印,终生使用
前端
IT_陈寒18 小时前
Vue的v-if和v-for混用居然是个天坑
前端·人工智能·后端
天衍四九-18 小时前
【无标题】
前端·spring boot·mysql·nginx·docker
广州华水科技18 小时前
2026年单北斗GNSS变形监测系统推荐榜单,解锁GNSS位移监测新高度
前端
xcyxiner18 小时前
DicomViewer24 修复编译bug(window test 失败)
前端·qt
linux_cfan19 小时前
videojs v10 源代码系列解读:34 · `createComposition`:类型安全的冲突检测
前端·安全
Bruce_Liuxiaowei20 小时前
网页版 DeepSeek “harness desktop“ WebGL 上下文创建失败排查实录
开发语言·javascript·webgl
utmhikari20 小时前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding
小凯在掘金20 小时前
为什么箭头函数不能作为构造函数?
前端·javascript