Vue移动端右滑屏幕返回上一页附源码下载
更新时间：2019年06月26日 08:23:58 作者：月光光
这篇文章主要介绍了Vue移动端右滑屏幕返回上一页，本文结合实例给大家介绍的非常详细，并附有源码下载,需要的朋友可以参考下
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件，提高用户体验。本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。
安装依赖
使用npm安装vue-directive-touch组件。
npm install vue-directive-touch --save
引入组件
在main.js中引入vue-directive-touch。
import touch from 'vue-directive-touch'; Vue.use(touch);
使用
在App.vue的模板中加上滑动事件。
<template> <div id="app" v-touch:right="onSwipeRight"> <transition> <router-view></router-view> </transition> </div> </template>
vue-directive-touch提供了以下事件类型：
- 单击： v-touch:tap
- 长按： v-touch:long
- 左滑： v-touch:left
- 右滑： v-touch:right
- 上滑： v-touch:up
- 下滑： v-touch:down
然后在script部分加上滑动事件方法。
methods: {
onSwipeRight () {
this.$router.go(-1)
}
}
接着我们在具体的页面写上逻辑跳转路由，注意具体页面设置好页面触控范围，让整个屏幕都可以touch。
.cont{
width: 100%;
height: 500px;
}
参照今日头条app的图片栏目，我们还可以设置点击打开新页面，上滑打开评论窗口，下滑关闭图片等操作。
Vue touch directive项目地址： https://github.com/BensonDu/vue-directive-touch
总结
以上所述是小编给大家介绍的Vue移动端右滑屏幕返回上一页附源码下载,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了Vue实现监听dom节点宽高变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了在vue中如何通过iframe方式加载本地的vue页面的解决方法，文中有详细的解决流程,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了在vue路由上添加公共的路由前缀方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue3-HTTP请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文主要介绍了el-form中的rules未生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了vue 地图可视化 maptalks 篇，本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
Vue3+Ant design 实现Select下拉框一键全选/清空功能
在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下2024-05-05
在Element Plus里，Icon图标的用法和以前不一样了，本文主要介绍了Element Plus的el-icon怎么用，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
这篇文章主要为大家介绍了Vue transx组件切换动画库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue组件实现首次加载就触发watch方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论