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路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <
-
Vue实现移动端左右滑动效果的方法
1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入: import VueTouch from 'vue-touch
-
基于Vue实现页面切换左右滑动效果
基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi
-
Vue移动端右滑屏幕返回上一页附源码下载
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验.Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件.使用它可以轻松实现屏幕触控.滑动触发事件,提高用户体验.本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页. 查看演示 下载源码 安装依赖 使用npm安装vue-directive-touch组件. npm install vue-directive-touch --save 引入组件 在main.js中引入vue-directive-touch.
-
Vue.js实现表格动态增加删除的方法(附源码下载)
Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例 源码 <!DOCTYPE html> <html lang="en"> <head&g
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
本文实例讲述了js实现类似iphone的网页滑屏解锁功能.分享给大家供大家参考,具体如下: iphone 的出现,打破了人们的用户体验,这一用户体验也延伸到了网页设计上.最近看到很多blog的评论都用类似iphone滑动解锁的方式实现.只有滑动解锁之后才能评论,或者做其他的事情.这个功能的实现,其实并不麻烦,关键是要有好的美工,做出好的滑动图片,然后javascript配合CSS就可以完成,我在这里也简单实现了一个,基本功能如下 1. 打开页面时隐藏评论框,你可以做成disable形式,下载源码
-
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
-
C#如何实现监控手机屏幕(附源码下载)
最近做了一个项目,里面有涉及到监控PC桌面和监视手机屏幕的功能,客户需要在PC电脑上和安卓手机上都能够观看对方的屏幕,而对方的设备既可以是PC电脑,也可以是安卓手机. 为了便于以后复习,我把这个屏幕监控的功能单独提出来做了个Demo名为ScreenMonitor来记录备忘,顺便也分享给大家. 该Demo一个包括3个项目:服务端.PC客户端.安卓客户端. 文末除了将ScreenMonitor整个项目的源码提供下载,也专门给出了可以直接部署的版本,供大家直接部署测试. 接下来,我将给大家介绍整个功能
-
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示 源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">
-
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示 源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr
-
JS实现移动端按首字母检索城市列表附源码下载
我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人.那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的. 查看演示 下载源码 准备 查看演示 下载源码 准备 首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成JSON形式了,大家可以直接拿去用. 我们还需要用到一个叫better-scroll的滚动插件,它能帮我们将超长的页面原生的滚动条处理掉,优化滚动效果. 接着我们准
-
vue实现的微信机器人聊天功能案例【附源码下载】
本文实例讲述了vue实现的微信机器人聊天功能.分享给大家供大家参考,具体如下: 先看效果: 实现过程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; fo
随机推荐
- trim原型函数看js正则表达式的性能
- 简单学习vue指令directive
- Tomcat ssl报错Connector attribute SSLCertificateFile must be defined when using SSL with APR解决方法
- 自制杀u盘病毒的批处理代码
- Ruby元编程基础学习笔记整理
- python使用SMTP发送qq或sina邮件
- c++回调之利用sink示例
- 浅谈const变量赋值报错分析
- 功能强大的PHP图片处理类(水印、透明度、旋转)
- javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
- zend stdio8.0 快捷键汇总集合
- linux下wc统计文件的个数、行数、字数、字节数等信息方法
- 给Linux新手[系列之五]
- 基于复选框demo(分享)
- Android控件RefreshableView实现下拉刷新
- 使用C#实现基于TCP和UDP协议的网络通信程序的基本示例
- 如何在CISCO路由器上禁止BT下载
- vue-infinite-loading2.0 中文文档详解
- layer.confirm()右边按钮实现href的例子
- JedisPool资源池优化方法