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>
相关推荐
边界条件╝15 小时前
微前端进阶(二)
前端
代码N年归来仍是新手村成员15 小时前
【AWS】Lambda 初识与服务部署
javascript·react.js·ai·node.js·云计算·ai编程·aws
罗超驿15 小时前
9.零基础学CSS:元素属性设置(字体、颜色、对齐等)全解析
前端·css
云水一下15 小时前
JavaScript 从零基础到精通系列:流程控制、函数与作用域
前端·javascript
丷丩15 小时前
MapLibre GL JS第28课:PMTiles源和协议
javascript·gis·map·mapbox·maplibre gl js
之歆16 小时前
Day24_JavaScript正则表达式与性能优化实战:从入门到精通
javascript·性能优化·正则表达式
柚子科技16 小时前
Vue3 响应式原理:我被 ref 和 reactive 坑了3次后终于搞懂了
前端·javascript·vue.js
大鱼前端16 小时前
Veaury:让Vue和React组件在同一应用中共存的神器
前端·vue.js·react.js
五月君_16 小时前
继 React、Vue 之后,Three.js 也有 Skills 了!AI 写 3D 终于不“晕”了
javascript·vue.js·人工智能·react.js·3d
scan72416 小时前
大模型只是知道要调用工具,本身不
前端·javascript·html