vue-router 手势滑动触发返回功能


Posted in Javascript onSeptember 30, 2018

vue-router的路由变换只存在“变换前”和“变换后”,不存在“切换中”的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的,我们可以在滑动之后再触发路由回退事件。

微博的滑动返回基本上就是这样的原理:先滑动、再触发返回事件,但用起来很是怪异,有严重的滞后感。夸克浏览器做的就比较好:一是滑动时界面虽然不动,但是界面上有小图标提示,能让用户接受到反馈;二是返回过程很快,没有多余的过渡动画。

app.vue文件如下:

<template>
 <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd">
 <transition :name="direction">
  <keep-alive include="home">
  <router-view class="appView"></router-view>
  </keep-alive>
 </transition>
 </div>
</template>

<script>
var swidth = document.documentElement.clientWidth;

export default {
 name: 'app',
 data: () => ({
 // direction 页面切换的过渡动画,配合transition组件使用
 direction: "slide-left",
 // touchLeft 划动起点界限,起点在靠近屏幕左侧时才有效
 touchLeft: swidth*2/5,
 // touchStartPoint 记录起始点X坐标
 touchStartPoint: 0,
 // distance 记录划动的距离
 distance: 0,
 // 回退按钮的dom,根据页面上是否存在此dom来判断该路由是否可回退
 backBtn: null
 }),

 watch: {
 // 监听路有变化,决定页面过渡动画
 $route(to, from) {
  if (from.name == "login" || from.path.indexOf("home") > -1) {
  this.direction = "slide-left";
  } else if (to.path.indexOf("home") > -1) {
  this.direction = "slide-right";
  } else {
  const toDepth = to.path.split("/").length;
  const fromDepth = from.path.split("/").length;
  this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
  }
 }
 },

 methods: {
 bodyTouchStart: function(event) {
  this.backBtn = document.getElementById("navback");
  if (this.backBtn) {
  // 获得起点X坐标,初始化distance为0
  this.touchStartPoint = event.targetTouches[0].pageX;
  this.distance = 0;
  }
 },
 bodyTouchMove: function(event) {
  if (this.backBtn && this.touchStartPoint < this.touchLeft) {
  // 只监听单指划动,多指划动不作响应
  if (event.targetTouches.length > 1) {
   return;
  }
  // 实时计算distance
  this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
  // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
  if (this.distance > 0 && this.distance < 100) {
   this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";
  } else if (this.distance >= 100) {
   this.backBtn.style.backgroundPosition = "0 0";
  } else {
   this.backBtn.style.backgroundPosition = "-50px 0";
  }
  }
 },
 bodyTouchEnd: function(event) {
  if (this.backBtn && this.touchStartPoint < this.touchLeft) {
  // 划动结束,重置数据
  this.touchStartPoint = 0;
  this.backBtn.style.backgroundPosition = "-50px 0";
  // 当划动距离超过100px时,触发返回事件
  if (this.distance > 100) {
   // 返回前修改样式,让过渡动画看起来更快
   document.getElementById("app").classList.add("quickback");
   this.$router.back();
   setTimeout(function(){
   document.getElementById("app").classList.remove("quickback");
   },250)
  }
  }
 }
 }
}
</script>

<style>
#app {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 width: 100%;
 overflow-x: hidden;
}
.appView {
 position: absolute;
 width: 100%;
 background: #fff;
 min-height: 100vh;
 transition: transform 0.24s ease-out;
}
#app.quickback .appView{
 transition-duration: 0.1s;
}
.slide-left-enter {
 transform: translate(100%, 0);
}
.slide-left-leave-active {
 transform: translate(-50%, 0);
}
.slide-right-enter {
 transform: translate(-50%, 0);
}
.slide-right-leave-active {
 transform: translate(100%, 0);
}
</style>

下面看下vue图片左右滑动及手势缩放

引入vue-awesome-swiperimport 'swiper/dist/css/swiper.css';

import { swiper, swiperSlide } from 'vue-awesome-swiper';components: {
 swiper,
 swiperSlide,
},data() {
 return {
 swiperOption: {
  width: window.innerWidth,
  zoom : true,
  initialSlide: 0,
 },
 };
},<swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
 <swiper-slide v-for="(img, index) in previewImg">
 <div class="swiper-zoom-container">
  <img :src="img" alt="">
 </div>
 </swiper-slide>
</swiper>

代码案例见 https://github.com/yource/VueSPA

总结

以上所述是小编给大家介绍的vue-router 手势滑动触发返回功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
javascript中的this作用域详解
Jul 15 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 #Javascript
JS数组实现分类统计实例代码
Sep 30 #Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 #Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 #Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
永不消失的title提示代码
2007/02/15 Javascript
学习ExtJS form布局
2009/10/08 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
ES6关于Promise的用法详解
2018/05/07 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python callable()函数用法实例分析
2018/03/17 Python
python使用turtle库绘制树
2018/06/25 Python
对Python 数组的切片操作详解
2018/07/02 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
办公室班子四风问题对照检查材料
2014/10/04 职场文书
Python上下文管理器Content Manager
2021/06/26 Python