Vue移动端右滑屏幕返回上一页附源码下载


Posted in Javascript onJune 26, 2019

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。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移动端右滑屏幕返回上一页附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 #Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 #Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 #Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 #Javascript
ES6 Object属性新的写法实例小结
Jun 25 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php如何调用webservice应用介绍
2012/11/24 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
canvas绘制七巧板
2017/02/03 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
使用Python写CUDA程序的方法
2017/03/27 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Django中modelform组件实例用法总结
2020/02/10 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
高级运动鞋:GREATS
2019/07/19 全球购物
人事档案接收函
2014/01/12 职场文书
教师教学评估方案
2014/05/09 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
小学庆六一主持词
2015/06/30 职场文书