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移动端右滑屏幕返回上一页附源码下载,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 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路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <

  • 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 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实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • js实现类似iphone的网页滑屏解锁功能示例【附源码下载】

    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实现鼠标滑过弹出更多相关信息层附源码下载

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示       源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr

  • JS实现移动端按首字母检索城市列表附源码下载

    JS实现移动端按首字母检索城市列表附源码下载

    我们常见的手机通讯录或微信通讯录,联系人信息是按字母顺序排列的列表,通过点击右侧的字母,会迅速定位检索到首字母对应的联系人.那么我今天给大家介绍的是按首字母快速定位到城市列表,效果和通讯录一样的.  查看演示 下载源码 准备 查看演示     下载源码 准备 首先我们需要用到全国的城市数据,这些城市数据来源于网络,我已经将数据格式化成JSON形式了,大家可以直接拿去用. 我们还需要用到一个叫better-scroll的滚动插件,它能帮我们将超长的页面原生的滚动条处理掉,优化滚动效果. 接着我们准

  • vue实现的微信机器人聊天功能案例【附源码下载】

    vue实现的微信机器人聊天功能案例【附源码下载】

    本文实例讲述了vue实现的微信机器人聊天功能.分享给大家供大家参考,具体如下: 先看效果: 实现过程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; fo

随机推荐