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移动端屏幕适配详解，包括了vue移动端屏幕适配详解的使用技巧和注意事项，需要的朋友参考一下 flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localh
-
问题内容： 我的后退滑动功能有效，但仅在屏幕边缘有效。如何在屏幕上的任何地方工作？ 问题答案： 苹果在这里说： InteractivePopGestureRecognizer 手势识别器负责将顶视图控制器从导航堆栈中弹出。（只读） @property（非原子，只读）UIGestureRecognizer * interactivePopGestureRecognizer 导航控制器将此手势识别器安
-
本文向大家介绍vue移动端的左右滑动事件详解，包括了vue移动端的左右滑动事件详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
我有一个活动叫做。我从MapsActivity开始参加这个活动。然而，在上运行几秒钟后，它会返回到，而我什么也不做。我需要修复它，但我不确定为什么会发生。 我正在尝试更新数据库： Locker对象使其在此处不可用（其唯一id已从传递到此处）， 我正在复制下面的代码： 日志中没有例外：我有这个：2020-02-11 22:35:30.211 10084-10127/android。比格纳德兰奇。pr
-
本文向大家介绍在vue中实现禁止屏幕滚动,禁止屏幕滑动，包括了在vue中实现禁止屏幕滚动,禁止屏幕滑动的使用技巧和注意事项，需要的朋友参考一下 今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博
-
滑动，就是一个点移动另一个点。 用法： def swipe(self, start_x, start_y, end_x, end_y, duration=None): """Swipe from one point to another point, for an optional duration. :Args: - start_x - x-coordinate at