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>
相关推荐
顾安r1 天前
12.17 脚本网页 创意导航
java·linux·前端·游戏·html
小明记账簿1 天前
CSS mix-blend-mode 实现元素融合效果
前端·css
_Kayo_1 天前
React 动态显示icon
前端·react.js·react
Q_Q5110082851 天前
小程序springBoot新农村综合风貌旅游展示平台
vue.js·spring boot·后端
free-elcmacom1 天前
Python实战项目<3>赛制分数分析
开发语言·前端·python·数据分析
Mr.Jessy1 天前
JavaScript高级:构造函数与原型
开发语言·前端·javascript·学习·ecmascript
白兰地空瓶1 天前
🚀你以为你在写 React?其实你在“搭一套前端操作系统”
前端·react.js
爱上妖精的尾巴1 天前
6-4 WPS JS宏 不重复随机取值应用
开发语言·前端·javascript
似水流年QC1 天前
深入探索 WebHID:Web 标准下的硬件交互实现
前端·交互·webhid
陪我去看海1 天前
测试 mcp
前端